CSS 网格布局：Metro 设计块
CSS 网格布局：Metro 设计块
来自 Competa IT 档案； Raymon 于 2017 年 10 月 12 日首次发表。
是时候我们不必再摆弄浮点数和表格了！ Flexbox 已经是前端开发者行业中的一个既定术语。
但是有一个新东西叫做“CSS Grid Layout”！好吧不是超新的，但目前所有主流浏览器的支持都很好。
让我们开始吧！
在本教程中，我想通过构建受 Metro 设计启发的布局来向您展示 CSS Grid！我将引导您完成构建此布局的过程。
从 HTML 开始
HTML 将有 1 个容器 div 和 9 个子 div。
<div class="grid">
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
<div class="blocks"></div>
</div>
CSS 网格魔法
让我们从设置网格容器的样式开始。
。网格 {
显示：网格；
网格模板列：重复（5、1fr）；
网格间隙：0.5rem；
填充：0.5rem；
网格自动行：最小最大（100px，自动）；
最小高度：计算（100vh - 1rem）；
}
我将遍历每个网格 CSS 属性来告诉你它的作用：
**显示：网格；
** 这会将您的容器激活为 CSS 网格布局
**网格模板列：重复（5、1fr）；
** 此属性将告诉 div 除以 5 个相等的列。它将被翻译成grid-template-columns：1fr 1fr 1fr 1fr 1fr；重复功能对此非常方便，它将使您免于手动输入需要多少列！
**网格间隙：0.5rem；
** 网格间隙是设置列和行之间的间隙。如果不定义，默认为 0。
**网格自动行：最小最大（100px，自动）；
** 使用 grid-auto-rows 上的 minmax 函数，我们将 min-height 设置为 100px，将 max-height 设置为 auto。
因为我想在容器周围有一个填充，所以我放了一个 0.5rem 的填充。为了获得正确的最小高度，我使用了 calc 函数从 100vh 中删除了 1rem (2 * .5rem)。
使用 CSS 网格布局，我们得到了一个新的灵活单元：Fr 单元。 Fr 是小数单位，1fr 代表可用空间的 1 部分。
地铁设计风格
由于 Metro 的设计风格，我们必须使一些 div 更大。让我们做第一个和最后一个div。
.blocks:first-child{
网格列：1/3；
网格行：1/4；
} .blocks:last-child{
网格列：4/6；
网格行：2/5；
}
使用 grid-column 和 grid-row 我们可以决定元素的位置应该在哪里以及它在网格上的大小。
对于第一个块元素，我们使从第一列到第三列的宽度相等。我们设置的从第一行到第三行的高度。
最后一个块元素将在第 4 列中，直到最后一个。高度将从第二行到最后一行。
如果您习惯 JavaScript 以 0 开头的数组，请记住网格列和行都是以 1 开头的。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
