Grid布局

CSS
Word count: 1.7k   |   Reading time≈ 7 min

Grid布局

Grid布局即网格布局，擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系，是目前唯一一种CSS二维布局。

容器属性介绍

display属性

声明display:grid，则该容器是一个块级元素；声明display:inline-grid，则容器元素为行内元素。

grid-template-columns和grid-template-rows属性

grid-template-columns设置列宽，grid-template-rows设置行高。

1
2
3
4
5
6
7
8
9
.wrapper {
  display: grid;
  /*  声明了三列，宽度分别为 200px 100px 200px */
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  /*  声明了两行，行高分别为 50px 50px  */
  grid-template-rows: 50px 50px;
}

以上表示固定列宽为200px 100px 200px，行高为50px 50px

repeat属性

可以简化重复的值。接收两个参数，第一个参数是重复的次数，第二个参数是重复的值。上面行高是一样的，可以这么去实现。

1
2
3
4
5
6
7
.wrapper-1 {
  display: grid;
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  /*  2行，而且行高都为 50px  */
  grid-template-rows: repeat(2, 50px);
}

auto-fill关键字

表示自动填充，让一行（或一列）中尽可能的容纳更多的单元格。

1
2
3
4
5
6
.wrapper-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

grid-template-columns: repeat(auto-fill, 200px)表示列宽是200px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素。

fr关键字

fr单位代表网格容器中可用空间的一等份。

1
2
3
4
5
6
.wrapper-3 {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的1/3和2/3。

minmax()函数

minmax()函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。接收两个参数，分别为最小值和最大值。

1
2
3
4
5
6
.wrapper-4 {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(300px, 2fr);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

grid-template-columns: 1fr 1fr minmax(300px, 2fr)表示第三个列表最少是300px，最大不能大于第一和第二列宽的两倍。

auto关键字

由浏览器决定长度。通过auto关键字，可以轻易实现三列或者两列布局。

1
2
3
4
5
6
.wrapper-5 {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

grid-template-columns: 100px auto 100px 表示第一第三列为100px，中间由浏览器决定长度。

grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性

grid-row-gap、grid-column-gap分别设置行间距和列间距，grid-gap属性是两者的简写形式。
grid-row-gap: 10px 表示行间距是10px，grid-column-gap: 20px表示列间距是20px。grid-gap: 10px 20px实现的效果是一样的。

1
2
3
4
5
6
.wrapper {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
1
2
3
4
5
6
7
.wrapper-1 {
  display: grid;
  grid-template-columns: 200px 100px 100px;
  grid-auto-rows: 50px;
  grid-row-gap: 10px;
  grid-column-gap: 20px;
}

grid-template-areas属性

grid-template-areas属性用于定义区域，一个区域由一个或者多个单元格组成。一般这个属性跟网格元素的grid-area一起使用，grid-area指定项目放在哪个区域。

1
2
3
4
5
6
7
8
9
10
.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px  120px  120px;
  grid-template-areas:
    ". header  header"
    "sidebar content content";
  background-color: #fff;
  color: #444;
}

上面代码表示划分出 6 个单元格，其中值得注意的是 . 符号代表空的单元格，也就是没有用到该单元格。

1
2
3
4
5
6
7
8
9
10
11
.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

以上代码表示将类 .sidebar .content .header所在的元素放在上面 grid-template-areas 中定义的 sidebar content header 区域中。

grid-auto-flow属性

grid-auto-flow属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。默认的放置顺序是“先行后列”，默认值是row。

1
2
3
4
5
6
7
.wrapper {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}


第五个项目和第六个项目之间有个空白（如下图所示），这个是由于第六块的长度大于了空白处的长度，被挤到了下一行导致的。在实际应用中，我们可能想让下面长度合适的填满这个空白，这个时候可以设置 grid-auto-flow: row dense，表示尽可能填满表格。代码以及效果如下所示：

1
2
3
4
5
6
7
.wrapper-2 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-auto-flow: row dense;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}


可以设置 grid-auto-flow: column，表示先列后行，代码以及效果如下图所示：

1
2
3
4
5
6
7
.wrapper-1 {
  display: grid;
  grid-auto-columns: 100px;
  grid-auto-flow: column;
  grid-gap: 5px;
  grid-template-rows:  50px 50px;
}

justify-items属性、align-items属性和place-items属性

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

1
2
3
4
.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

其代码实现以及效果如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrapper, .wrapper-1, .wrapper-2, .wrapper-3 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
  justify-items: start;
}
.wrapper-1 {
  justify-items: end;
}
.wrapper-2 {
  justify-items: center;
}
.wrapper-3 {
  justify-items: stretch;
}
start：对齐单元格的起始边缘

end：对齐单元格的结束边缘

center：单元格内部居中

stretch：拉伸，占满单元格的整个宽度（默认值）

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

1
place-items: <align-items> <justify-items>;

justify-content属性、align-content属性和place-content属性

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

1
2
3
4
.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}
start - 对齐容器的起始边框
end - 对齐容器的结束边框
center - 容器内部居中
1
2
3
4
5
6
7
8
9
10
11
12
13
.wrapper, .wrapper-1, .wrapper-2, .wrapper-3, .wrapper-4, .wrapper-5, .wrapper-6 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
  justify-content: start;
}
.wrapper-1 {
  justify-content: end;
}
.wrapper-2 {
  justify-content: center;
}

space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
stretch - 项目大小没有指定时，拉伸占据整个网格容器
1
2
3
4
5
6
7
8
9
10
11
12
.wrapper-3 {
  justify-content: space-around;
}
.wrapper-4 {
  justify-content: space-between;
}
.wrapper-5 {
  justify-content: space-evenly;
}
.wrapper-6 {
  justify-content: stretch;
}

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

请我喝杯咖啡吧~

支付宝
微信