[CSS] 栅格化布局

[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

​​grid-template-columns​​​的属性值​​100px 100px auto​​​的意思是将区域划分为三列，第一列和第二列的宽度都为​​100px​​，第三列的宽度为自适应。

grid-template-rows 设置行数

上面我们设置了列数，那么对应的，就有行数，我们来设置下模版行数。

.container{ min-height: 200px; display: grid; grid-template-rows: 60px

​​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; 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;}

函数minmax限定最小最大值

在我们布局空间有限的情况下，我们需要对布局的元素设置其最小值和最大值，通过​​minmax()​​函数可以轻松做到。

.container{ display: grid; grid-template-columns: repeat(2, 100px) minmax(60px, 1fr) 2fr;}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。