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 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38362/22492111