学习CSS Grid布局

CSS Grid 布局是CSS中最强大的布局系统,与flexbox的一维布局系统不同,CSS Grid是一个二维布局系统,它可以同时处理行和列.

第一个Grid布局

css Grid布局由两个核心组成部分,warpper(父元素)和items(子元素).warpper是实际的grid(网格),items是网格的内容.

下面是一个warpper元素,内部包含了6个items:

1
2
3
4
5
6
7
8
<div class="warpper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

要把warpper元素变成一个grid(网格),只需要把它的display属性设置为grid即可.

1
2
3
.warpper{
  display:grid;
}

这时我们还没有写任何样式,他会简单的将6个div堆叠在一起.

Columns(列)和rows(行)

为了使其成为二维的网格容器,我们需要定义行和列.让我们创建两行三列,使用grid-template-cloumns和grid-template-rows属性.

1
2
3
4
5
.warpper{
  display:grid;
  grid-template-rows: 100px 50px;
  grid-template-cloumns: 100px 80px 60px;
}

我们为grid-template-cloumns写入了3个值,这样我们就得到了3列,每列的值代表列的宽度.而grid-template-rows代表行数及行的高度.

放置items(子元素)

为了帮助理解,我们在每个items(子元素)加上单独的class.

1
2
3
4
5
6
7
8
<div class="warpper">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

现在我们来创建一个 3*3的grid:

1
2
3
4
5
.warpper{
  display:grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-cloumns:100px 100px 100px;
}

我们只在页面上看到3-2的grid,而我们定义的是3-3的grid.这是因为我们只有6个items来填充这个网格.我们我们再追加3个items,name最后一行也会被填满.

要定位和调整items大小,可以使用grid-cloumn和grid-row属性来设置.

1
2
3
4
.item1{
  grid-cloumn-start: 1;
  grid-cloumn-end: 4;
}

上面的样式表示,我们希望item1占据从第一个网格线开始,到第四条网格线结束.换句话说它将独占一行.而剩下的items都推到了下一行.

这种形式也可以缩写为:

1
2
3
4
5
6
.item1{
  grid-cloumn: 1/4;
}
.item3{
  grid-row: 2/4;
}

相关术语

  1. 网格容器(Grid):应用display:grid的元素,items的直接父级元素.
  2. 网格项(items): 网格容器的直接子元素,后代元素不是.
  3. 网格线(Grid-line):构成网格结构的分界线.
  4. 网格轨道(Grid-Track):两条相邻网格线之间的空间.
  5. 网格单元格(Grid-cell):两个相邻行与相邻列之间的空间.
  6. 网格区域(Grid-Area):四条网格线包围的总空间.

父元素 网格容器属性

display

将元素定义为网格容器,并为其建立新的网格式上下文.

  • grid : 生成一个块级网格
  • inline-grid: 生成一个内联网格
  • subgrid: 嵌套的子网格.

在网格容器中使用float,clear,column,vertical-align不会产生任何效果.

grid-template-cloumns/rows

使用空格分割值列表,用来定义网格的行和列.可以是长度值和百分比,和自动分配(auto)或网格线名称.

grid-template-areas

指定Grid Area名称来定义网格模板.一个.号代表一个空的单元.你可以使用任意数量的.只要这些.之间没有空隙隔开就表示一个个的单元格.

  • :由items的grid-area指定的区域名称
  • .(点号):代表一个空网格单元
  • none:不定义网格区域
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.container{
  display:grid;
  grid-template-rows:auto;
  grid-template-cloumns:50px 50px 50px 50px;
  grid-template-areas: 
    "header header header"
    "main main . sidebar"
    "footer footer footer footer"
}
.item-a{
  grid-area:header;
}
.item-b{
  grid-area:main;
}
...

当你命名网格区域后,该区域两端的网格线实际上是自动命名的,如果你的网格区域名字是foo,则起始行网格线和列网格线是foo-statrt,最后的网格线是foo-end.则意味着一个网格线可能有很多名称.

grid-template

用于定义grid-template-rows,grid-template-cloumns,和grid-template-areas的缩写.

  • none:将所有的属性设置为初始值.
  • subgrid:将rows和cloumns设置为subgrid,areas设置为初始值.
  • /:将rows和cloumns设置为特定值,areas为none.
grid-column-gap/grid-row-gap

指定网格线的大小,可以把它想象为设置列/行之间间距的宽度.值为长度值.

grid-gap

grid-column-gap/grid-row-gap的缩写语法

justify-items

网格容器的水平对其方式,这些行为也可以通过items的justify-self属性设置:

  • start 左侧对其
  • end 右侧对其
  • center 居中对齐
  • stretch 填满区域宽度
align-items

网格容器的垂直对齐方式:

  • start 顶部对齐
  • end 底部对齐
  • center 垂直居中
  • stretch 填满区域高度
justify-content/align-content

有时,网格容器的内容小于整体容器的大小,可以设置内容在容器中的对齐方式.

  • start 左对齐
  • end 右对齐
  • center 居中
  • stretch 填充
  • space-around 左右两边都有空间,空格之间距离相等
  • space-between 左右两边没有空间,空格之间距离相等
  • space-evenly 左右和每个空间距离相等
grid-auto-columns/grid-auto-rows

指定自动生成隐式网格轨道,但定义行和列自动超出网格范围时,隐式网格轨道创建.值为长度,百分比等等.

grid-auto-flow

如果你有一些未明确放置的网格,自动放置算法会自动放置这些项.

  • row: 依次填充每行
  • column:依次填充每列
  • dense: 出现较小的网格项时,尝试填充网格中较早的空缺.但它可能导致你的网格项出现混乱.

子元素 网格项items属性

grid-column-start/end

通过指定网格线来确定网格在容器中的列的起始位置

grid-row-start/end

通过指定网格线来确定网格在容器中的行的起始位置

grid-column/grid-row

上面两者的缩写

grid-area

为网格项提供一个名词,一遍容器grid-template-areas属性创建模板进行引用.也可以作为grid-row和grid-cloumn的缩写.

justify-self/align-self

items的水平/垂直对其方式