css网格布局简介
时间：2023-03-31 12:46:05
CSS
简介CSS网格布局（又称“网格”）是一种二维网格布局系统。CSS并不总是擅长处理网页布局。一开始我们用table（表格）布局，后来用float（浮动）、position（定位）和inline-block（内联块）布局，但这些方法本质上都是hack，缺少很多功能，比如垂直居中。后来推出了flexbox盒子布局，解决了很多布局问题，但只是一维布局，不是复杂的二维布局。事实上，它们（flexbox和grid）可以很好地结合使用。浏览器支持在我们开始正式学习Grid布局之前，在caniuse上看看各种浏览器对grid布局的支持是非常有用的。基本概念就是要学好Grid布局的用法。基本概念的介绍是必不可少的，虽然看起来比较枯燥。网格容器（GridContainer）可以通过display属性将属性值设置为grid或inline-grid来创建网格容器。网格容器中的所有子元素都会自动成为网格项（Griditem）网格线（GridLine）的分割线。它们可以是列网格线，也可以是行网格线，位于相邻的两条网格线之间，位于行或列的任一侧GridTrack网格轨道之间。你可以把它们想象成网格列或行网格单元（GridCell）两条相邻的列网格线和两条相邻的行网格线组成一个网格单元，它是最小的网格单元网格区域（GridArea）网格区域由任意一个组成网格单元数基本属性和功能一个简单的例子介绍Grid布局属性，我们先从一个简单的例子说起：如上图所示，如果我们要实现一个3x3的方阵，用Grid布局怎么实现？
。容器{显示：网格；宽度：200px；高度：200px；网格模板行：重复（3、50px）；网格模板列：重复（3、50px）；网格行间距：10px；grid-column-gap:10px;}.containerdiv{background-color:#ccc;border:1pxsolid#333;}如上代码所示，3x3矩阵布局用Grid布局写起来非常简单方便。与其他布局相比，Grid布局的优势就体现出来了。那么，接下来让我们看看Grid。本地常用的那些属性：grid-template-rows：指定的每个值可以创建每行的高度。行高的大小可以是任意非负值，长度可以是px、%、em等长度单位的值grid-template-columns：指定每个值创建每列重复函数的列宽：使用repeat()创建重复的网格轨道。这适用于创建大小相等的网格项和多个网格项，repeat()接受两个参数：第一个参数定义网格轨道应重复的次数，第二个参数定义每个轨道网格的大小-column-gap和grid-row-gap属性用于创建列和行之间的间距，间隙（Gap）可以设置为任意非负值，长度值可以是px、%、em等单位值。网格线号定位还是上面的html代码，一个3x3的矩阵，不同的是这次我们使用网格线号来定位具体的方块。.container{显示：网格；宽度：200px；高度：200px；网格模板行：重复（3、50px）；grid-template-columns:repeat(3,50px);}.containerdiv{background-color:#ccc;边框：1px实心#333；网格列开始：2；网格列端：3；网格行开始：2；网格行尾：3；/*网格区域:2/2/3/3;*/}通过上面的代码，我们可以实现如下效果：显示我们定位矩阵中间的小方块，其余不显示。下面是我们的网格线编号定位的属性：每条线从网格轨道开始，网格的网格线从1开始，每条网格线逐渐递增1grid-row-start：表示起始行网格线numbergrid-row-end：表示结束行网络网格线号grid-column-start：表示起始列网格线号grid-row-end：表示结束列网格线号如果一个网格项只跨越一行或者一列，则不需要grid-row-end和grid-column-endgrid-area:也用grid区域来定位。如果只提供一个值，则指定grid-row-start和grid-column-start的值。如果提供两个值，第一个值是grid-row-start和grid-column-start的值，第二个值是grid-row-end和grid-column-end的值，必须有用/分隔。如果指定四个值，第一个值对应grid-row-start，第二个值对应grid-column-start，第三个值对应grid-row-end，第四个值对应grid-column-endGrid区域命名和定位网格项通过上面的例子，我们知道了如何使用网格线来定位网格项。接下来，我们将学习如何通过命名网格区域来定位网格项。示例开始：
