时间：2023-09-27 05:48:02 | 来源：网站运营
时间：2023-09-27 05:48:02 来源：网站运营
[CSS] 栅格化布局：栅格化布局帮助你更容易构建复杂的网页设计。它会将
在线咨询
HTML元素转换为网格的容器（有行有列）。你可以在网格里面添加你想要的子元素。HTML元素转换为网格的容器，只需要对其设置display: grid即可。display: grid告诉我们，可以使用CSS Grid的相关属性了。<dl class="container"> <dd class="item1">item1</dd> <dd class="item2">item2</dd> <dd class="item3">item3</dd> <dd class="item4">item4</dd> <dd class="item5">item5</dd> <dd class="item6">item6</dd></dl>.container{ display: grid;}⚠ 在CSS栅格布局中，父元素就是栅格容器（这里是class="container"的dl元素），其下的子元素为我们称为项目items
container为珊格化了，那么我们还得为这块圈起来的元素设置模版列数，表明列的区域。.container{ min-width: 200px; display: grid; grid-template-columns: 100px 100px auto;}grid-template-columns的属性值100px 100px auto的意思是将区域划分为三列，第一列和第二列的宽度都为100px，第三列的宽度为自适应。.container{ min-height: 200px; display: grid; grid-template-rows: 60px auto;}grid-template-rows的属性值60px auto的意思是将区域分为两行，第一行的高度固定为60px，而第二行的高度自适应。单位的设置可以有px, auto, %, fr。这里的fr是fraction的缩写,表示某物的部分。比如下面的例子：
grid-template-rows: auto 10% 2fr 1fr，表示的意思是将栅格化的区域分为4行：第一行是根据内容自适应，第二行为区域的10%，最后剩余的区域分成三部分，2fr表示占其2/3，1fr表示占其1/3。
margin-left和margin-right的应用：.container{ display: grid; grid-template-columns: 100px 100px auto; grid-column-gap: 10px;}grid-column-gap表示列之间相隔10px，对左边界区域左间隔不影响，对右边界区域右间隔不影响。margin-top和margin-bottom的应用：.container{ display: grid; grid-template-rows: 60px auto; grid-row-gap: 10px;}grid-row-gap表示行之间相隔10px，对上边界区域顶部间隔不影响，对下边界区域底部间隔不影响。margin一样，我们可以对margin-top, margin-right, margin-bottom, margin-left进行简写。grid-gap可以对grid-row-gap, grid-column-gap进行简写。grid-gap的值又不像margin一样可以写四个，它只有两个：.container{ display: grid; grid-template-columns: 100px 100px auto; grid-template-rows: 60px auto; grid-gap: 10px 20px;}grid-gap: 10px 20px表示行间隔为10px，列间隔为20px。grid-column表示列跨度，比如:.container{ display: grid; grid-template-columns: 100px 100px auto; .item5{ grid-column: 1 / 3 }}grid-column上面的列跨度，表示类名为item5元素横跨第一列到第三列。grid-row表示行跨度，比如：.container{ display: grid; grid-template-rows: 50px 50px auto; .item3{ grid-row: 2 / 4 }}grid-row上面的行跨度，表示类名为item3元素横跨第二行到第四行。justify-self更改元素宽度和排列的位置，有值如下：align-self更改元素高度和排列的位置，有值如下：justify-items属性，而不是一个个子元素进行设置justify-self属性。justify-items属性值同justify-self。.container{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; justify-items: center;}align-items属性，而不是一个个子元素进行设置align-self属性。align-items属性值同align-self。.container{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 10px; align-items: center;}grid-template-areas为每个栅格单元命名。.container{ display: grid; grid-template-columns: 100px 100px auto; grid-template-rows: 50px 50px auto; grid-template-areas: "header header header" ". content content" "footer footer footer";}注意: ⚠ .表示表格中的空单元格
grid-template-areas已经为元素划分好了单元格并命名了，接下来可以通过grid-area在其子元素中关联上。.container{ display: grid; grid-template-columns: 100px 100px auto; grid-template-rows: 50px 50px auto; grid-template-areas: "header header header" ". content content" "footer footer footer"; .item6{ grid-area: footer; }}当然，我们可以仅仅使用grid-area实现上面需要grid-template-area和grid-area才能实现的效果。如下.container{ display: grid; grid-template-columns: 100px 100px auto; grid-template-rows: 50px 50px auto; .item6{ grid-area: 3 / 1 / 4 / 4; }}grid-area简写的语法是：grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;grid-template-columns和grid-template-rows定义栅格的行列结构。上面我们是一个个定义的。我们也可以使用repeat()函数简化操作。100px，第三列为1fr,最后一列是2fr。.container{ display: grid; grid-template-columns: repeat(2, 100px) 1fr 2fr;}minmax()函数可以轻松做到。.container{ display: grid; grid-template-columns: repeat(2, 100px) minmax(60px, 1fr) 2fr;}上面的属性在实际的开发中已经够用。如果你还想了解其他的属性等，你可以点击下面的参考链接进行学习。grid的兼容性还是杠杆的，除了Opera Mini和Baidu Browser不支持外，其他的都支持~关键词：布局
