CSS学习笔记【Grid布局】

总结

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。

容器属性

display 属性

div {
  display: grid;
}

grid-template-columns 和 grid-template-rows

容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

还可以利用百分比等

• repeat(3, 33.33%)
• auto-fill 关键字
• fr 关键字
• minmax()
• auto 关键字

grid-template-columns属性对于网页布局非常有用。两栏式布局只需要一行代码。

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}

间隔属性

• grid-row-gap 属性，
• grid-column-gap 属性，
• grid-gap 属性

grid-template-areas 属性

网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。

grid-auto-flow属性

顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。

对齐属性

• justify-items 属性
• align-items 属性
• place-items 属性

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）

place-items属性是align-items属性和justify-items属性的合并简写形式。

• justify-content 属性
• align-content 属性
• place-content 属性

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。

place-content属性是align-content属性和justify-content属性的合并简写形式。

grid-auto-columns 和 grid-auto-rows

rid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。

项目属性

指定项目的四个边框

• grid-column-start 属性，
• grid-column-end 属性，
• grid-row-start 属性，
• grid-row-end 属性

grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

对齐属性

• justify-self 属性，
• align-self 属性，
• place-self 属性

阮一峰 CSS Grid 网格布局教程

CSS学习笔记【Flex布局】