CSS 网格基础

本周我决定研究定位和布局网站的最佳方法之一……CSS 网格布局模块。使用这种方法可以很好地布置网站、应用程序甚至是一个小元素容器。它允许我们开发人员在二维网格系统上定位元素。简而言之，我们可以使用列和行来排列所有元素。

创建网格容器

在使用网格布局时，必须创建一个容器来容纳需要在网格中布局的元素。下面是 HTML 文件中网站布局的网格容器示例。

 <div id="grid-container"> <nav></nav>  
 <section></section>  
 <footer></footer> </div>

现在我们已经有了我们的网格容器，我们需要在我们的 CSS 文件中声明它并为其分配一个规则以使该容器成为一个网格容器。

 #网格容器{  
 显示：网格；  
 }

添加此规则后，我们现在可以访问各种不同的属性，这些属性将允许我们在网格中定位元素。

设置行和列

如前所述，我们可以使用二维网格系统设置元素的定位。我们通过使用我们的行和列来实现这一点。要在我们的新网格容器中设置行和列，我们使用属性 网格模板 对于列或行，然后我们将列/行的数量和大小添加为值。

 #网格容器{  
 显示：网格；  
 网格模板列：200px 200px 100px；  
 /* 创建 3 列_第 1 和第 2 列各 200 像素，第 3 列是 100 像素 */  
 网格模板行：100px 100px 150px；  
 /* 创建 3 行_第 1 行和第 2 行各 100 像素，第 3 行是 150 像素 */  
 }

grid-template 属性的值也为 FR （分数单位）。 fr 单位表示网格容器中可用空间的一小部分。使用这些单元可以使我们的项目在我们的网格中更具响应性和灵活性。

 #网格容器{  
 显示：网格；  
 网格模板列：1fr 1fr；  
 /* 创建 2 列，每列占用可用空间的一小部分 */  
 }

我们也可以使用重复值来给出列/行数。

 #网格容器{  
 显示：网格；  
 网格模板行：重复（3、1fr）；  
 /* 重复（数量，大小） */  
 }

在网格中定位元素

当使用网格系统时，我们得到了有用的属性 网格列 和 网格行 .我们可以使用这些属性专门将我们的元素放置在我们的网格中。要使用这些属性，我们必须声明我们希望定位的元素并将其中一个或两个属性添加到元素中。

 导航{  
 网格列：1 / 2；  
 网格行：2 / 4；  
 /* 从第 1 列开始，跨越 1 列，从第 2 行开始，跨越 2 行 */  
 } 部分 {  
 网格列：2/ 3； /* 从第 2 列开始，跨越 1 列 */  
 } 页脚 {  
 网格行：1 / 2； /*从第 1 行开始，跨越 1 行*/  
 }

我们也可以使用 跨度 关键字来表示网格列/网格行属性中的最终值。

 导航{  
 网格行：2 / 跨度 4；  
 /* 从第 2 行开始，跨越 2 行 */  
 }

按名称定位元素

网格布局系统甚至可以方便地通过直接为元素分配名称并通过元素名称定义列/行来定位元素。

 #网格容器{  
 显示：网格；  
 网格模板区域：  
 “我的部分我的导航”  
 “我的页脚我的导航”  
 } 导航{  
 网格区域：myNav；  
 }  
 部分 {  
 网格区域：mySection；  
 }  
 页脚 {  
 网格区域：myFooter；  
 }

在上面的示例中，网格容器中的每个元素都已命名并使用网格模板区域按顺序放置。我们的网格将设置为 mySection 和 myFooter 分别填充第一行和第二行的第一列，而 myNav 填充两行的第二列。

空间元素

现在我们已经在网格上设置了元素，我们可能希望在它们之间添加一些空间，这样看起来不错。我们可以使用 网格列间隙 和 网格行间隙 属性在列和行之间添加空间。

 #网格容器{  
 网格列间隙：50px；  
 网格行间隙：25px；  
 }

有一个速记属性允许我们同时为列和行添加间隙空间。该物业是 网格间隙 财产。

 #网格容器{  
 网格间隙：50px；  
 }

网格使布局变得简单

总之，我们可以使用网格系统来制作出色的复杂布局，这些布局可以响应并在制作项目时看起来不错。当然，也有其他的布局系统，但我个人认为网格系统是我自己项目中定位部分的更有用的布局系统之一。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/37664/32401817