CSS 网格布局

CSS 网格布局提供了带有行和列的基于网格的布局系统

网格元素

网格布局由一个父元素以及一个或多个子元素组成。

准备

准备如下元素与样式：

<div class="wrap">
  <div class="grid-item item-1">1</div>
  <div class="grid-item item-2">2</div>
  <div class="grid-item item-3">3</div>
  <div class="grid-item item-4">4</div>
  <div class="grid-item item-5">5</div>
</div>

.wrap {
  width: 400px;
  height: 400px;
  margin: 20px auto;
  background-color: pink;
}

.grid-item {
  padding: 10px;
  color: #fff;
  background-color: red;
}

父元素是一个 400 * 400 的粉色块
子元素是一个红色块

display 属性

当 HTML 元素的 display 属性设置为 grid 或 inline-grid 时，它就会成为网格容器。

.wrap {
  ...
  display: grid;
}

设置 display: grid 之后，理解为五行一列，布满元素

网格列（Grid Columns）

网格项的垂直线被称为列

网隔行（Grid Rows）

网格项的水平线被称为行。

grid-template-columns 属性

grid-template-columns 属性定义网格布局中的列数，并可定义每列的宽度

该值是 以空格分隔 的列表，其中每个值定义相应列的长度。

如果网格布局包含 4 列，请指定这 4 列的宽度；如果所有列都应当有相同的宽度，则设置为 "auto"。不能使用百分比

注意：如果在 4 列网格中有 4 个以上的项目，则网格会自动添加新行

设置 3 列的尺寸：

.wrap {
  ...
  display: grid;
  grid-template-columns: 50px 50px auto;
}

前两列为 50px ,第三列分配剩余全部
行高平分高度

grid-template-rows 属性

grid-template-rows 属性定义每列的高度。定义方法与列相同

设置 2 行的尺寸：

.wrap {
  ...
  display: grid;
  grid-template-columns: 50px 50px auto;
  grid-template-rows: 50px;
}

第一行的高度为：50px
第二行分配剩余高度

网格间隙（Grid Gaps）

每列/行之间的间隔称为间隙。

可以通过使用以下属性之一来调整间隙大小：

grid-row-gap
grid-column-gap
grid-gap（grid-row-gap 和 grid-column-gap 属性的简写属性）

设置 gap

.wrap {
  ...
  display: grid;
  grid-template-columns: 50px 50px auto;
  grid-template-rows: 50px;
  grid-gap: 10px;
}

网格行线（Grid Lines）

列之间的线称为列线（column lines）。

行之间的线称为行线（row lines）。

grid-column 属性

grid-column 属性定义将项目放置在哪一列上，可以定义项目的开始位置以及结束位置，定义的是线值（line1、line2、...）

grid-column 属性是 grid-column-start 和 grid-column-end 属性的简写属性

如需放置某个项目，您可以引用行号（line numbers），或使用关键字 "span" 来定义该项目将跨越多少列

把网格项目（设置在子元素）放在列线 1，并在列线 3 结束：

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

或者：

.item-1 {
  grid-column: 1/3;
}

或者：从列线 1开始，并跨越 2 列

.item-1 {
  grid-column: 1 / span 2
}

子元素 1 占两列，相当于多了一份，原先的元素依次后移

grid-row 属性

grid-row 属性定义了将项目放置在哪一行

您可以定义项目的开始位置以及结束位置

grid-row 属性是 grid-row-start 和 grid-row-end 属性的简写属性

如需放置项目，您可以引用行号，或使用关键字 "span" 定义该项目将跨越多少行：

把网格项目（设置在子元素）放在行线 1，并在行线 3 结束：

.item-1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

或者：

.item-1 {
  grid-row: 1/3;
}

或者：从行线 1开始，并跨越 2 行

.item-1 {
  grid-row: 1 / span 2
}

子元素 1 占两行，原先下一行的元素依次后移

justify-content 属性

justify-content 属性用于在容器内对齐整个网格。

注意：网格的总宽度必须小于容器的宽度，这样 justify-content 属性才能生效。

调整行，列的宽高均为 50。取消行，列合并

.wrap {
  width: 400px;
  height: 400px;
  margin: 20px auto;
  background-color: pink;
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px;
  grid-gap: 10px;
}

.grid-item {
  padding: 10px;
  color: #fff;
  background-color: red;
}

start

在容器开头对齐网格，默认

center

会在容器中间对齐网格

end

会在容器末端对齐网格

space-evenly

均分剩余空间

space-between

列之间留出相等的空间

space-around

列之间留出相等的空间，首尾两侧也留出相等的空间，但两个空间不一定相等

align-content 属性

align-content 属性用于垂直对齐容器内的整个网格

值与 justify-content 的写法效果一致

grid-area 属性

grid-area 属性定义网格项目的尺寸以及在网格布局中的位置

grid-area 属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。

使 "item1" 从 row-line 1 和 column-line 1 开始，在 row-line 3 和 column line 3 结束：

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}

使 "item1" 从 row-line 2 和 column-line 1 开始，并横跨两行两列：

注意：位置也被改变了

.item-1 {
  grid-area: 2 / 1 / span 2 / span 2;
}

命名网格项

grid-area 属性也可以用于为网格项目分配名称，通过网格容器的 grid-template-areas 属性来引用命名的网格项目

grid-template-areas：

每行由撇号（' '）里面的内容定义
每行中的列都在撇号内定义，并以空格分隔
. 表示没有名称的网格项目

让 "myArea" 跨越3列网格布局中的两列（句号代表没有名称的项目）：

.wrap {
  width: 400px;
  height: 400px;
  margin: 20px auto;
  background-color: pink;
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px;
  grid-gap: 10px;
  grid-template-areas: "myArea myArea . ";
}

.grid-item {
  padding: 10px;
  color: #fff;
  background-color: red;
}

.item-1 {
  grid-area: myArea;
}

如需定义两行，请在另一组撇号内定义第二行的列：

.wrap {
  ...
  grid-template-areas: "myArea myArea . " "myArea myArea . ";
}

实例-命名所有项目，并制作一张随时可用的网页模板

<div class="wrap">
  <div class="grid-item item-1">Header</div>
  <div class="grid-item item-2">Menu</div>
  <div class="grid-item item-3">Main</div>
  <div class="grid-item item-4">Right</div>
  <div class="grid-item item-5">Footer</div>
</div>

* {
  margin: 0;
  padding: 0;
}
.item-1 {
  grid-area: header;
}
.item-2 {
  grid-area: menu;
}
.item-3 {
  grid-area: main;
}
.item-4 {
  grid-area: right;
}
.item-5 {
  grid-area: footer;
}

.wrap {
  width: 400px;
  height: 400px;
  margin: 20px auto;
  background-color: pink;
  display: grid;
  grid-gap: 10px;
  grid-template-areas:
    "header header header header header header"
    "menu main main main right right"
    "menu footer footer footer footer footer";
}

.grid-item {
  padding: 10px;
  color: #fff;
  background-color: red;
}

CSS grid 网格布局