html中怎么设置栅格,[CSS]栅格化布局
栅格化布局帮助你更容易构建复杂的⽹页设计。它会将HTML元素转换为⽹格的容器(有⾏有列)。你可以在⽹格⾥⾯添加你想要的⼦元素。
grid 初始化元素为栅格化
将⼀个HTML元素转换为⽹格的容器，只需要对其设置display: grid即可。display: grid告诉我们，可以使⽤CSS Grid的相关属性了。
item1
item2
item3
item4
item5
item6
复制代码
.container{
display: grid;
}
复制代码
⚠ 在CSS栅格布局中，⽗元素就是栅格容器(这⾥是class="container"的dl元素)，其下的⼦元素为我们称为项⽬items
grid-template-columns 设置列数
上⾯我们已设定容器container为珊格化了，那么我们还得为这块圈起来的元素设置模版列数，表明列的区域。
.container{
min-width: 200px;
display: grid;
grid-template-columns: 100px 100px auto;
}
复制代码
grid-template-columns的属性值100px 100px auto的意思是将区域划分为三列，第⼀列和第⼆列的宽度都为100px，第三列的宽度为⾃适应。
grid-template-rows 设置⾏数
上⾯我们设置了列数，那么对应的，就有⾏数，我们来设置下模版⾏数。
.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。
grid-column-grap 设置列间距
有必要对列与列之间设置间距，你可以理解为margin-left和margin-right的应⽤：
.container{
display: grid;
grid-template-columns: 100px 100px auto;
grid-column-gap: 10px;
}
复制代码
grid-column-gap表⽰列之间相隔10px，对左边界区域左间隔不影响，对右边界区域右间隔不影响。
grid-row-gap 设置⾏间距
像上⾯设置列边距⼀样，有必要设置列与列的间距，对应的 - 你可以理解为margin-top和margin-bottom的应⽤：
.container{
display: grid;
grid-template-rows: 60px auto;
grid-row-gap: 10px;
}
复制代码
grid-row-gap表⽰⾏之间相隔10px，对上边界区域顶部间隔不影响，对下边界区域底部间隔不影响。
grid-gap 简写
像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
grid-column表⽰列跨度，⽐如:
.container{
display: grid;
grid-template-columns: 100px 100px auto;
.item5{
grid-column: 1 / 3
}
}
复制代码
grid-column上⾯的列跨度，表⽰类名为item5元素横跨第⼀列到第三列。⼦元素 grid-row
对应的，grid-row表⽰⾏跨度，⽐如：
.container{
display: grid;
grid-template-rows: 50px 50px auto;
.item3{
grid-row: 2 / 4
}
}
复制代码
grid-row上⾯的⾏跨度，表⽰类名为item3元素横跨第⼆⾏到第四⾏。
⼦元素 justify-self
justify-self更改元素宽度和排列的位置，有值如下：
stretch: 默认值，拉伸内容的宽度为预设的宽度
start: 宽度为内容宽度，内容在左侧展⽰
center: 宽度为内容宽度，内容在居中展⽰
end: 宽度为内容宽度，内容在右侧展⽰
⼦元素 align-self
align-self更改元素⾼度和排列的位置，有值如下：
stretch: 默认值，拉伸内容的⾼度为预设的⾼度
start: 宽度为内容⾼度，内容在上侧展⽰
center: 宽度为内容⾼度，内容在居中展⽰
end: 宽度为内容⾼度，内容在下侧展⽰
justify-items
我们想对所有⼦元素内容进⾏⽔平⽅向的排列，那么需要在设定的容器中使⽤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-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
通过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-area关联预设名称
grid-template-areas已经为元素划分好了单元格并命名了，接下来可以通过grid-area在其⼦元素中关联上。
.container{
display: grid;
grid-template-columns: 100px 100px auto;
css布局左边固定右边自适应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;
复制代码
使⽤函数repeat简化
使⽤grid-template-columns和grid-template-rows定义栅格的⾏列结构。上⾯我们是⼀个个定义的。我们也可以使⽤repeat()函数简化操作。
⽐如分为四列，第⼀列和第⼆列是100px，第三列为1fr，最后⼀列是2fr。
.container{
display: grid;
grid-template-columns: repeat(2, 100px) 1fr 2fr;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论