在 Web 开发中，布局一直都是前端界面设计中最重要的一环。要实现一个好看且易于使用的网站，需要对页面布局有深入的理解。而不规则的布局，则更需要借助Web技术去实现。
传统的网格系统能够实现基础的网站布局，但是它们通常仅限于规则的网格布局，严格限制了设计的自由性和创意性。引入 CSS Grid 可以实现灵活的网格布局，不仅可以增强布局功能，而且可以帮降低开发难度，提高后期维护的可行性。
下面，我们就来介绍一些使用 CSS Grid 实现不规则布局的技巧。
1. 使用fr为单元格分配空间
CSS Grid 的情况下，定义的网格中，可以使用fr值来为每个单元格分配空间。fr 占用了网格容器剩余空间的比例。例如，如果你有三个单元格，那么你可以使用如下方法，使用 fr 分配空间。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 2fr 1fr;
}在这个示例中，第一个单元格和第三个单元格都有 1fr 的宽度，第二个单元格具有 2fr 的宽度。这意味着中间的单元格将占用 2/4 的空间，而左边和右边的单元格都将占用 1/4 的空间。
2. 使用 auto 和 minmax 来控制网格分配
任何时候，我们都可以使用 auto 和 minmax 来控制 CSS 网格中每个单元格的大小。
.container {
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: 30px minmax(100px, 1fr) 30px;
}在上面的代码中，我们使用 auto 排列了左右两个单元格，而使用了 minmax 来排列中间单元格。minmax 的第一个参数是最小值（此处为 100 像素），第二个参数为最大值（此处为 1fr）。这样设置后，当容器大小改变时，中间的内容将自动根据容器的大小进行调整。
3. 跨列和跨行
CSS Grid 还提供了跨列和跨行的功能。如果需要将某个元素跨过多个单元格，则可以使用 grid-column 和 grid-row 属性指定每个元素所跨越的单元格数量。
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --- ----- ---- ------------------- ----- ----- ------ - ----- - ------------ - - -- --------- - - -- -
这个示例中，元素 item 跨越从第一行到第三行，从第一列到第二列的所有格子。 这样，CSS 网格就具有非常强大的布局能力，可以实现大量不同的不规则布局。
总结：
本文介绍了 CSS Grid 实现不规则布局的基本方法。通过 CSS 网格，我们可以轻松地、高效地设计出复杂的界面，实现高效的排版布局。而且，CSS 网格代码的灵活性和易于维护的性质，让我们在设计中拥有更多的自由度和灵活性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646328ce968c7c53b042c76e