在黑暗时代，排字工人在桌子上建站。 然后他们掌握了浮子和弹性盒，黑暗逐渐消退。 在2017年，启蒙运动随着CSS网格布局的出现而开始。
网格考虑了水平和垂直空间，您可以在不更改布局的情况下更改布局，而无需进行媒体查询。 使用Grid，您可以忘记魔术数字，黑客，变通方法和CSS框架。
尽管功能强大，但有一点细微之处会破坏画面-布局设计师仍然很少使用它。 有一个Grid规范，浏览器支持，但实际项目很少。
关于此内容的是
谢尔盖·波波夫 （
Sergey Popov）关于
Front Conf 的报告的笔录：有关规范，为何布局设计师不怕Grid以及如何决定在其项目中使用网格来“使您的网站再次变得更好！”。
演讲者简介 ：Sergey
Popovsergey，来自HTML Academy的
前端开发外包总监A. League，前端开发人员，莫斯科社区组织者，WSD联合组织者和
pitercss_conf 。 在成为公司负责人之前，他从事排版工作了很多年。
在过去的一年中，出现了许多有关Grid的课程和报告，说明了如何使用和编写它们。 如果您对技术报告感到厌倦，那么我会在您的列表中再添加一个。
笑话-让我们谈谈漫画。 还是不行注意 ：代替冗长的“ CSS Grid Layout”，将仅显示“ Grid”。
CSS网格布局有什么用？
从技术上讲，网格是一个简单的二维网格。
绘制和使用网格非常简单，但是开发人员仍在回避它。 我看到两个原因。
- 许多人根本不了解网格正在发生什么。 关于此工具的大量神话使它难以理解。
- 作为排版员和前端供应商，我们不了解在日常任务中如何以及在何处使用Grid。
让我们从第一点开始分析。
规格书
该规范的第一版于2012年发布，变化很大，与之对应，五年后，它开始被积极地引入。 2017年，同样的繁荣时期发生了，从最初发布的草稿状态开始六个月的Grid得出结论，即Chrome浏览器首先实现了无标志，然后又实现了所有其他浏览器。 由于实施工作很匆忙，因此规范并没有解决，必须保留一些有争议的问题，以使浏览器不必重写一半的引擎。
尽管仍处于候选推荐状态，但该规范是稳定的。 如果可以的话，我早就已经发布了它，但是规范的开发者并不着急，而是补充和更改了措辞。
让我们应用非推荐的Grid Layout规范-这并不矛盾，因为Grid是首先实现然后描述的。
第二个错误的陈述是，没有第二个层次，网格就没有意义。
二级规范
当他们编写该规范时，结果发现它太大了，所以一部分分配给了第二层。
对于2018年，首次公开工作草案状态下的第二级规范是工作草案的首次发布。
该规范正在积极地制定中，并且在不久的将来它将进入工作草案状态-工作草案。 开发人员正在等待Grid的发布，但这是一个漫长的过程，可能会持续5年。
根据传说，第二级规范解决了第一级的问题。 实际上，它增加了您无法拥有的功能，并且没有任何东西会阻止您在没有第二级的情况下使用第一级。
显示：子网格；
在我们知道什么是网格之前，子网格是如何出现的。 让我们弄清楚它是什么。
想象一下这个标记。
一切都很简单：我们有一个网格，其中嵌入了三个非语义和一个语义元素。 网格的工作方式类似于flexbox：使用
display: grid; 对于包装器，它仅适用于嵌套第一层的元素。
在示例1、2和3中，
<div>将在网格中占据一席之地，列表中的所有内容都将折叠。 您将失去所有这些元素，因为这就是网格的工作方式。
如果希望这些元素保留在网格中，则有两个选择：
- 第一种选择是摆脱包装器 。 删除
<ul>并将<li>替换为<div> 。 我们杀死了语义，但离开了网格。
- 第二个选项是使用
display: subgrid; 。
如果您应用
display: subgrid; 到列表中，
<li>元素将成为此网格的一部分，
<ul>像包装一样将被忽略。 您将获得完整的网格，并保留完整的语义-HTML和CSS都很好。
一个问题是
不支持subgrid ，它位于标志后面的某个位置，并且释放的时间可能很长。
显示内容
通常，
不必等待 ，因为存在
display: contents; -一个与
display: subgrid;相同的奇妙属性
display: subgrid; 。 如果适用于列表中的元素，则
display: contents; ，则
<li>元素将成为网格的一部分。
有细微差别-
display: contents; 并非所有浏览器都支持。
CSS子网格仿真
display: contents; 解决了支持问题后，布局设计师想出了一条出路-他们进行了子网格仿真。
幻灯片上是
Pasha Lovtsevich的 一个示例 。
在上面的示例中，有一个subgrid行为，但是没有通过
display: subgrid;模拟它的行为
display: subgrid; 或
display: contents; ，以及由于自定义表达式而将其转换为变量。
连字符属性是CSS中的自定义属性。不需要第二级
如果有人告诉您在第二级出现之前不要使用Grid，请不要听它。 第二级解决了某些已经以其他方式解决的问题。
并非到处都需要子网格。 与Flexbox结合使用的网格有时要比与子网格结合的要凉得多。
因此，不要等待第二级，可以随时做第一级。 而且，他已经是。
浏览器中的网格支持
如果有人告诉您不支持网格，则可以显示此图片。
全球支持的
87％的浏览器 （Opera Mini除外）-它不支持任何内容。
我写信给 CanIuse ，要求将其从列中删除，以免破坏图片，但到目前为止无济于事；）如果添加
@supports ，则一切正常，甚至Opera Mini也可以。 我不知道Opera Mini是否支持flexbox，但是您可以在那里进行后备。
IE有问题。 和往常一样，他和我们在一起，没有走过任何地方。
IE和网格
如果您的应用程序支持IE，则可能会说您无法使用Grid。 事实并非如此
-Grid在IE中有效 ，因为该规范诞生于Microsoft，并且最早出现在IE中。 在普通人来写规范之前，没有人会使用它。
IE正在处理Grid，但需要说明如何做。
IE在规范的旧版本中支持Grid ，其中不支持所有属性，但对部分属性的调用有所不同。
您无需学习IE的版本规范，因为为您
完成的大部分工作都
将由Autoprefixer完成 ，该插件将新版本的规范
移植到旧版本。 因此，要在IE中提供Grid支持，使用Autoprefixer就足够了。
剩下的您只需要了解和记住即可。 只需打开文章
“在Internet Explorer中支持CSS网格” ，阅读IE中支持哪些属性，不支持哪些属性，然后确定将使用哪个属性。
当来自新元素的元素在浏览器的旧版本中消失时，请记住“优雅降级”。 例如，在不支持边界半径的浏览器中，形状将具有正方形角。 布局设计师被迫切出表单图片而不是CSS，在某些情况下这被认为是正常的。
为什么不将Grid转换为旧版浏览器中的常规列？ 如果您正在开发旧的浏览器，要么不使用现代技术，要么忍受它们中的内容看起来会有所不同的事实。
Internet Explorer与Grid配合良好，您只需要进行一些练习即可。 如果您不使用Grid（因为担心IE），那么我一定会让您感到惊讶-它将无法工作。
错误和网格
您可以说Grid中有很多错误，但事实并非如此。
雷切尔·安德鲁（Rachel Andrew） 在CSS网格中发现了
所有错误 -
总共有14个 ，仅此而已。 没有人比Rachel更喜欢Grid Layout CSS，因此您可以信任她。
错误非常具体。 我们记得flexbox到来时，它们也有bug，但这并没有阻止我们。 网格中的错误也不会阻止我们，尤其是这样。
“某些HTML元素不能是网格容器。” 马上有一个澄清，该按钮不能是Grid容器，
但我们不希望这样做 。
“ Textarea，当它是Grid的一个元素时，会崩溃。” 如果以百分比表示宽度和高度，则可以轻松解决此问题。
这些错误是非常具体的，并非在所有浏览器中都出现。 如果您知道可能会发生错误，则只需修复并修复它-这很容易。
不使用网格的技术原因并不多。 浏览器支持，并且在旧的浏览器中使用“优雅降级”。 理论上的原因也很少，因为材料比flexbox多。
理论或小型教育计划
网格在这里！ 我们可以说很长一段时间为什么不使用Grid，但是当您阅读本文时，Grid已在生产环境中部署。
网站已经使用网格。 例如，我去了俄罗斯互联网周网站，这是我期望看到网格的最后一个地方。 通常，商务会议场所聚集在Tilda上。
而且，他们或多或少正确地使用了网格。 RIW尝试了，他们做到了，并且没有后备。 他们显然是针对现代浏览器的用户的。
无论如何，谈论CSS的会议都尝试使用新工具。 我们在站点pitercss_conf上制作了徽章，来自明斯克的家伙在网格上拥有一半的站点。
俄罗斯互联网周的访问者范围很窄。 纽约时报的读者更多。
我敢肯定，即使在IE 9、10、11中，读者中也有设备的所有者，但是该站点的一半在网格上。
当我看到如此大的项目使用Grid时，我感到很惊讶。
为什么不到处都使用Grid？
我们意识到有一个规范，可以使用，没有任何借口。 那怎么办？
有某些原因不使用网格：
- 设计人员不会对布局设计人员提出难以解决的任务。
- 布局设计师不了解如何将Grid应用于实际项目。 您的设计师很可能没有绘制复杂的网格，并且您不了解如何将Grid附加到布局。
在设计方面
现在，我将保护设计师。根据设计趋势，设计发展缓慢，与Web技术的发展无关。 恰恰相反，网络技术人员必须适应设计趋势。 程序员不太可能会说：“设计师，我们有一个网格，您可以使用它。”而他们会说：“哦，是的！” 并开始为其绘制布局。
因此，大多数站点看起来像这样。
一个带有简单网格和列的抽象示例，没有什么异常。 如果没有flexbox，该站点很容易构建，即使是浮动的，您也可以通过表格布局轻松获得。
设计师不再为布局设计师提出复杂的任务，因为一旦我们自己因为我们停止做他们想做的事情而将他们推向一个角落。
设计师来找我们说：
-
我想要一个复杂的网格！-
我不能 她很复杂 。-
不行 。-
我不能！然后，我们去找经理，抱怨，然后设计师受到了打击。
就是这样，设计师不再绘制复杂的网格。 以前，我们确实无法构建复杂的界面，但现在可以了-我们有很多工具。 现在，设计师不再想要了，他不再要求复杂的布局。 设计人员绘制一个接口，以便布局设计人员可以实现它，并且通常尽可能原始。
博客
我将从外包中举一个常见的例子。 设计师的任务是画博客，并发泄所有网格动量。 画一个大块，宽，3个小，中等，幻想的大小。 看起来很酷，很现代。
排字工人看到布局，在flexbox上写一个包装纸，第二个，第三个包装纸，然后得到这样的图片。
布局转到后端，后端告诉布局设计者他从数据库中得出了一个结论，并且卡片彼此接连出现，无法扩展。
这结束了快乐的故事，我们返回设计师。
当设计师绘制布局时，他提出了其他选择。 在选项中，有一些幻想，而后端则在一瞬间打破了阵风。 创建漂亮博客的计划失败了。
有不同的退出选项：
- 设计师被送到一个遥远的角落，他们说：“我们将一个接一个地拥有一切，我们可以在不炫耀您的情况下做，做可以在flexbox上实现的事情。” 设计师会受苦 ，但会在Behance上发布带有漂亮网格的作品集。 在布局中，将有一个到生产的链接，并且只有正方形。
- 排字机挂起一个jQuery插件，该插件会自动以绝对位置将元素排列在网格上-一切都很好！ 此外，该插件还将额外加载页面，并毫不客气地滞后于IE。 但是， 设计师和后端将感到满意 。
- 设计师和布局设计师将同意并实施一个令人难以置信的故事， 并将折衷设计，后端和布局 。
真实案例
The Village杂志的主页上有一个复杂的网格。 它是专为不同类型的材料制作的。 自从我从事出版物工作以来，我就知道这一点。
“村庄”编写了一个庞大的算法，该算法在后端生成网格。 这是浮动，绝对定位和其他令人恐惧的事情的混合体，但它确实有效！
有时它会中断，但是当发生这种情况时，只需重新排列这些块，然后一切都会重新开始。
我无法想象设计该系统，调试它并使它几乎没有错误地工作需要花费几个小时。 如果使用
display: grid; ，实现相同的网格需要花费多长时间
display: grid; 或
grid-auto-flow: dense; ？ 在网格内部，有一个单独的规范，可以自动排列页面上的元素，它本身会阻塞空白区域并实现类似的网格。 您不需要一万行的后端代码-一切都只需要一个属性即可。
在创建算法时，尚不存在这项技术，但是在进行重新设计时，我建议立即使用Grid。
“村庄”迷惑地去做他们想做的事情，但大多数人不这样做。 因此，我们看到一个普通的Web，标准化，所有这些都归结为一个Layout。 我们曾经有Bootstrap，它描述了大多数代码。 现在，设计师已经拥有了自己的工具，例如Bootstrap，他们可以使用这些工具来构建网站。
什么废话-创意在哪里？！我们的任务不是同意在社区中使用Grid，而是将其告知设计师。
我的梦想是在设计会议上讲话并说：“你好！ 我们变得更好了！ 我们再次变得很聪明，“但不允许他们在设计师会议上组成编码人员。 告诉设计师我们已经变得更好并不难。 您会问到一个简单的网格：“为什么它简单却不复杂？ 我什么都可以做！”
在实施方面
网格似乎很难找到。 当他们对我说：“我有3栏，我可以在flexbox上完成。 为什么需要网格？”，然后我回答：“的确不需要。” 因此，在哪里应用网格存在困难。
网格不仅是复杂的网格
这是一个简单的布局，可以在Grid上完成，并且比flexbox上容易，因为不需要其他包装。 下面是Grid上的一个示例，它也可以在flexbox上完成，但是您需要大量其他包装程序或流程，这真是一团糟。
网格-不适用于小型元素 ：适用于非常复杂的
小型元素或大型
元素 。
布局网格
我不知道您在哪个站点上无法重写Grid上的布局，并在此上节省了很多无用的附加包装。
这是pitercss_conf-2徽章，是在网格上制成的。
网格布局中最难的部分是绘制适合您的网格。 在这种情况下，这不仅是6 * 6，而且是5 * 8，而且每个块都有不同的高度和宽度。
我们看到任务并撰写内容，与Photoshop中的指南非常相似。 设计师画了画，然后我们将布局转移到了网格上。 这里没有额外的包装器-只有使用Grid内置到网格中的语义元素。
登机牌可以在flexbox上取得。
而且有可能在Grid上，并且在移动版本中，优惠券看起来有所不同。
结构网格
要记住的第二件事：
使用网格，您可以简单地更改结构 。
flexbox中有order，它允许您更改所有元素的顺序。 这是一项复杂的技术，如果您不知道如何使用Z索引，可以如何用脚踩脚。
网格很简单。 在此示例中，如果没有网格，我们将必须将带有QR码的右侧部分移到绝对位置。 在Grid上，移动版本中有13行代码。
要开始使用Grid，您需要开始使用Grid 。 尝试在网格上布置界面的某些元素。 您可以从小公司开始，也可以从全球公司开始，以了解这如何简化生活。
没有人会告诉你：“在这里使用网格，但不在这里！” 您必须了解和学习自己，但是为此您需要填补障碍。 如果在Grid上执行任务所花的时间是在Flexbox上花费的时间的两倍，那么不需要在Grid上解决此类任务。
对于漫画来说，网格是完美的。
考虑一个非平凡的问题。
如果您深入研究代码，则很清楚一切工作原理。 伙计们使用CSS编程并构建网格区域。 根据玩家的角色，他会自动升至所需区域。 垂直和水平对齐可创建构造。 这就是整个CSS编程。 用50行CSS代码解决了这个问题，这比通过后端或JS容易得多。
我希望这样的设计和布局有趣。
网格上的布局太复杂了，因为任务很困难。 布局设计器无法在简单的flexbox上绘制布局，只能在Grid上绘制。 可以制作更少的单元格，但是鉴于这些单元格是通过重复构建的，因此不需要花费很多时间。 最主要的是他们做到了。
它组成复杂，但将来会很酷地重建接口。
接下来是什么？
让我们停止对自己说：就网格而言，“我不能” 。 您可以-只是不想。 除了懒惰和不愿意尝试之外，没有客观原因不使用网格。
网格是如此通用，以至于不可能为它创建框架 。 如果您看到某个框架使用了Grid Layout-这是胡说八道，因为Grid本身就是用于构建网格的框架。 引导程序不太可能切换到网格。 想象会有2000万个课-一个变态！
因此，您将永远不会有现成的解决方案。 可能有模板，但是没有规则在哪里应用网格以及在哪里不应用网格。
学习，查看示例，开发 。 看别人的例子并没有错。 例如，我这样做。
带给团队知识 。 假设您了解网格，建议使用它。
去找设计师说：“让您画出更多有趣的东西，我会实现您的想法的！”
告诉经理：“我们现在可以使用Grid做更多的事情！”
在团队中分享您的知识并推动网络向前发展。 最终，我们有一个简单的目标-
使网络变得更好，更酷 ！
如果某种程度上一切都简化了，那么现在就有了新技术。 不仅Grid是SVG蒙版，动画，变换。 问题不在于技术，而在于大多数仍未使用其中一半的事实。 我们一无所知或不想使用，设计师也不知道我们能做什么。
Sergey Popov的联系人： 电子邮件 ，
Fb ，
twitter该报告是Front Conf上最好的报告之一。 我喜欢它，并且想要更多-请订阅新闻通讯 ，我们在其中收集新资料并提供视频访问权，并于5月参加Frontend Conf RIT ++ 。
您知道更多，并准备分享您的经验-非常好！ 发送摘要 ，报告已经打开，并将一直持续到2月27日。