一些CSS网格策略匹配设计模型

网络开发的世界一直存在设计与开发的交接之间的差距。雄心勃勃的设计师希望他们努力看起来独特而美丽（并符合他们最初的视野）的最终结果，而许多开发人员在结果中发现了更多的价值，该结果是一致，可靠且可靠且坚固的（并且易于编码）。这种动态可能会导致双方之间持续的紧张，双方都希望以自己的方式引导事情。

尽管这种情况在某种程度上是不可避免的，但新的前端技术可以在使双方更加靠近的情况下发挥作用。这样的技术是CSS网格。这篇文章探讨了如何将其用于编写CSS样式，以高度的保真度匹配设计布局（没有头痛！）。

设计师向前端开发人员提供指导的一种常见方式是使用设计模型（通过模型，我们正在谈论在草图，XD，Illustrator，Photoshop等中内置的可交付成果）。所有设计师在某种程度上都有不同的工作方式（与开发人员一样），但是许多人都喜欢将其布局结构置于某种网格系统上。一致的网格系统对于传达应如何编码网页以及在用户屏幕的大小与模型的大小时应如何做出响应是无价的。作为开发人员，我非常感谢设计师会很麻烦地采用经过深思熟虑的网格系统。

12列布局特别受欢迎，但其他模式也很常见。诸如Sketch和XD之类的软件使创建页面遵循预设列布局非常简单 - 您可以通过单击按钮打开和关闭覆盖层。

一旦实现了网格系统，大多数设计元素应将其放置在其中。这种方法可确保塑造均匀排队，并具有更具吸引力的外观。除了视觉上具有吸引力外，可预测的网格还为开发人员提供了一个独特的目标，可以在编写样式时拍摄。

不幸的是，这种基本模式在欺骗上很难准确编码。诸如Bootstrap之类的框架通常用于创建网格布局，但它们具有增加页面重量和缺乏细粒度控制的缺点。 CSS网格为前端完美主义者提供了更好的解决方案。让我们看一个例子。

上面的设计是网格的好应用。有一个14列模式，其中有多个元素。尽管盒子都具有不同的宽度和偏移，但它们都遵守相同的网格。该布局可以使用Flexbox（甚至是Floats）制成，但这可能涉及一些非常特定的数学，以在所有断点中获得像素完美的结果。让我们面对现实：许多前端开发人员对此没有耐心。让我们看一下更轻松地完成此类工作的三种CSS网格布局策略。

策略1：基本网格

编写均匀间隔的12列布局的最直观的方式可能是其中的某种变化。在这里，外部容器用于控制左右填充的外部天沟间距，并使用内部行元件将内容限制为最大宽度。该行获得了一些特定网格的样式：

显示：网格；
网格板柱：重复（12，1fr）;
网格间隙：20px;

该规则将网格定义为由12列组成，每个列具有一个分数单元（FR）的宽度。还指定了列之间20px的差距。使用列模板集，可以使用网格列属性很容易地设置任何子列的开始和结尾。例如，设置网格列：3/8位置该元素从第三列开始，并跨越五列到第八列。

我们已经可以在此示例中看到CSS网格提供的内容很多，但是这种方法有一些局限性。一个问题是Internet Explorer，它不支持网格差距属性。另一个问题是，这种12列方法无法在间隙开始时在间隙或末端列的末端启动列的能力。为此，需要另一个系统。

策略2：更灵活的网格

尽管网格间隙可能是IE的，但可以通过将空格作为网格模板本身的一部分来重新创建缝隙的外观。网格 - 板柱可用的重复功能不仅接受单个列宽作为参数，而且接受任意长度的重复模式。为此，可以重复11次列的模式，然后可以插入最终列以完成所需的12列 / 11内部间隙布局：

网格板柱：重复（11，1fr 20px）1FR;

这围绕IE问题，还允许在两个列或间隙上启动和结束列。虽然比以前的方法是一个很好的改进，但它仍然有一些生长空间。例如，如果要在屏幕外边缘的一侧放置一列，而另一侧则拟合在网格系统中怎么办？这是一个例子：

在此布局中，卡（我们的左列）开始并在网格中结束。主图像（我们的右列）也开始在网格内，但延伸到屏幕边缘的网格之外。为此编写CSS可能是一个挑战。一种方法可能是将图像绝对放置并将其固定在右边缘，但这是由于将其从文档流中取出的缺点（如果图像比卡高，这可能是一个问题）。另一个想法是使用Floats或Flexbox来维持文档流，但这需要进行一些棘手的一次性计算，以使宽度和间距正确。让我们看一个更好的方法。

策略3：更灵活的网格

该技术建立在上次修订中引入的想法上。现在，我们没有将网格存在于定义天沟大小和行宽度的其他元素中，而是将这些空间与网格的模式集成在一起。由于排水沟，列和间隙均已合并到模板中，因此可以使用网格柱属性轻松而精确地将子元素放置在网格上。

 $行宽度：1140px;
$ gutter：30px;
$ GAP：20px;
$ BREAK：$ ROW宽度2 * $ Gutter;
$ COL-WIDTH-POST-BREAK ：（ $ Row宽度-11 * $ GAP） / 12;
  
。容器 {
  显示：网格；
  网格 - 板块列：$ gutter重复（11，calc（（100％-2 *＃{$ gutter} -11 *＃{$ gap}）/12）＃{$ gap}）
  @Media屏幕和（最小宽度：＃{$ break}）{
    网格 - 板列列：计算（0.5 *（100％ - ＃{$ row-row-width}））重复（11，＃{$ col-witth- post-break}＃{$ gap}）＃{$ col-width-post-break} calc（0.5 *（0.5 *）
  }
}

是的，需要一些数学才能使它正确。在实现行的最大宽度之前和之后，将模板设置不同很重要。我选择为此使用SCSS，因为定义变量可以使计算更容易管理（更不用说其他开发人员更可读了）。最初的12部分模式发展到了23部分的模式，并结合了11个内部间隙，现在是25件，占左和右牙龈的占25件。

关于这种方法的一件很酷的事情是，它可以用作设置模式后遵守网格的任何布局的基础，包括传统上尴尬的布局，其中涉及跨越外边缘的列。此外，它是准确实施可能在优质模型中传授的设计的直接方法。那应该使开发人员和设计师都开心！

有几个警告...

尽管这些技术可用于破解传统上尴尬的造型问题，但它们不是银子弹。相反，应该将它们视为用于正确应用程序的替代工具。

第二和第三个布局模式不合适的一种情况是需要自动放置的布局。另一个是生产环境，需要支持与CSS网格相处不好的浏览器。

以上是一些CSS网格策略匹配设计模型的详细内容。更多信息请关注PHP中文网其他相关文章！