Grid布局

December 03, 2020 1693

Grid与Flex布局有一定相似性，都可以指定容器内部多个项目的位置，但是Grid布局是二维布局，将容器划分为行和列，Flex布局是一维布局，针对轴线布局。

同样，Grid布局也会有容器和项目的概念，还有行和列，交叉得到单元格。

容器属性

display

display：grid指定容器，默认是块级元素,但也可以设成行内元素：display：inline-grid可以设为行内元素。

注意，当设置成网格布局后，项目的float、display：inline-block/table-cell、vertical-align都会失效

grid-template-columns、grid-template-rows

前者定义每一行垂直的列宽，后者定义水平的行高。可以直接px定义，也可以使用**repeat()**来简化重复值。第一个参数是重复次数，第二个参数是重复的值

1
grid-template-rows: repeat(3, 33.33%);//定义了三栏的行高为33.33%

可以使用auto-fill来自动填充，直到容器放不下了。使用fr关键字表示比例关系。auto表示由浏览器自己决定长度。

grid-template-columns对于两栏布局、三栏布局十分方便

1
2
3
4
.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}

十二栏布局

1
grid-template-columns:repeat(12,1fr)

column-gap、row-gap 、gap

row-gap 设置行间距、column-gap设置列间距，gap是两个属性的简写。根据最新标准，前缀grid-去掉了。

grid-template-areas

“区域”，一个区域由单个或多个单元格组成。grid-template-areas划分区域

1
2
3
grid-template-areas: 'a b c'
                     'd e f'
                     'g h i';

如果某些区域不需要利用，则使用”点”（.）表示。

grid-auto-flow

设置子元素的排列顺序，默认row先行后列，column先列后行

justify-items ， align-items ， place-items

justify-items设置单元格内容的水平位置（左右中），align-items设置单元格内容的垂直位置（上中下）。取值都如下：

  • start：对齐单元格的起始边缘。
  • end：对齐单元格的结束边缘。
  • center：单元格内部居中。
  • stretch：拉伸，占满单元格的整个宽度（默认值）。

项目属性

grid-column-start ， grid-column-end ， grid-row-start ， grid-row-end

用于指定项目四个边框的位置分别位于哪个网格线上

  • grid-column-start属性：左边框所在的垂直网格线
  • grid-column-end属性：右边框所在的垂直网格线
  • grid-row-start属性：上边框所在的水平网格线
  • grid-row-end属性：下边框所在的水平网格线

grid-column 是前面两个属性的简写， grid-row 也是简写。

grid-area

指定项目放在哪个区域

1
2
3
.item-1 {
  grid-area: e;
}//放在中间区域

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的简写，直接指定项目的位置。

justify-self ，align-self ，place-self

与前面的justify-items属性的用法完全一致，只是用于单个项目。

参考文章：CSS Grid 网格布局教程

查看评论