Grid

Posted on

二维布局方式，可以同时控制行和列的分布和对齐方式。只需在外层容器添加display: grid;即可开启

grid-template-columns

固定宽度：grid-template-columns: 100px 100px 100px; 将容器分为3列，每一列的宽度为100px

浮动宽度：grid-template-columns: 1fr 1fr 1fr; 将容器分为3列，每一列的宽度为1/3

​ grid-template-columns: 1fr 2fr 1fr; 将容器分为3列，宽度为1/4,2/4,1/4

column-gap和row-gap

column-gap: 12px; 列间距为12px

row-gap: 24px; 行间距为24px

gap: 24px; 统一设置行间距和列间距都为24px

grid-template-areas

1
2
3
4
5
6
<div class="layout">
    <header>头部</header>
    <aside>侧边栏</aside>
    <main>内容</main>
    <footer>底部</footer>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.layout{
    grid-template-areas:
	"header header header"
	"sidebar content content"
	"footer footer footer";
}
header{
    grid-area: header;
}
main{
    grid-area: content;
}
aside{
    grid-area:sidebar;
}
footer{
    grid-area: footer;
}

对齐方式

行轴，块轴

垂直居中： align-items: center; //每一个单元格内容物的对齐方式

垂直靠下：align-items: end;

水平居中：justify-items: center;

水平靠右对齐：justify-items: end;

水平两端对齐：justify-items:space-between; //最左一列水平靠左对齐 最右一列水平靠右对齐 其余的水平居中对齐

如果行轨道和列轨道小于grid容器:

1
2
3
.grid{
	align-content: center;
}

所有行垂直居中于grid容器（我觉得很像是把所有单元格合并看作是一块，相对于有grid属性的外容器使用margin来进行水平居中）

align-content: end; 靠下对齐

justify-content和 justifyy-items用法差不多，一个是用于所有单元格合并的内容，一个是用于单元格