跳到主要内容

CSS 网格布局

CSS 网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是 HTML 生成了这些区域）。

像表格一样，网格布局让我们能够按行或列来对齐元素。然而在布局上，网格比表格更可能做到或更简单。例如，网格容器的子元素可以自己定位，以便它们像 CSS 定位的元素一样，真正的有重叠和层次。

👉 CSS 网格布局-快速查询​

repeat()​

repeat() 函数：可以简化重复的值。该函数接受两个参数，

  • 第一个参数是重复的次数，
  • 第二个参数是所要重复的值。
.wrapper-1 {
  display: grid;
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  /*  2行，而且行高都为 50px  */
  grid-template-rows: repeat(2, 50px);
}

auto-fill​

  • auto-fill 关键字：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。
  • grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素，
  • 代码如下：
.wrapper-2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

fr​

  • Grid 布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。
  • fr 单位代表网格容器中可用空间的一等份。
  • grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。
  • 代码如下：
.wrapper-3 {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

minmax()​

  • 我们有时候想给网格元素一个最小和最大的尺寸，minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。
  • 它接受两个参数，分别为最小值和最大值。
  • grid-template-columns: 1fr 1fr minmax(300px, 2fr) 的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。
  • 代码以及效果如下：
.wrapper-4 {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(300px, 2fr);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

auto​

  • auto 关键字：由浏览器决定长度。
  • 通过 auto 关键字，我们可以轻易实现三列或者两列布局。
  • grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度，
  • 代码以及效果如下：
.wrapper-5 {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

grid-row-gap、​

设置行间距

grid-column-gap、​

设置列间距

grid-gap​

grid-gap 属性是（grid-row-gap，grid-column-gap）两者的简写形式

  • grid-row-gap: 10px 表示行间距是 10px，
  • grid-column-gap: 20px 表示列间距是 20px。
  • grid-gap: 10px 20px 实现的效果是一样的

grid-template-areas​

  • grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成
  • 一般这个属性跟网格元素的 grid-area 一起使用，我们在这里一起介绍。
  • grid-area 属性指定项目放在哪一个区域
.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 个单元格，其中值得注意的是 . 符号代表空的单元格，也就是没有用到该单元格。

.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 属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。
  • 默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，
  • 即下图英文数字的顺序 one,two,three...。这个顺序由 grid-auto-flow 属性决定，
  • 默认值是 row。
.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，表示尽可能填满表格

.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，表示先列后行，代码以及效果如下图所示：

.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 属性设置单元格的垂直位置（上中下）

下面以 justify-items 属性为例进行讲解，align-items 属性同理，只是方向为垂直方向。

它们都有如下属性：

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

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

.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：拉伸，占满单元格的整个宽度（默认值）

justify-content、align-content、place-content​

  • justify-content 属性是整个内容区域在容器里面的水平位置（左中右），
  • align-content 属性是整个内容区域的垂直位置（上中下）。
  • 它们都有如下的属性值。
.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;
}

下面以 justify-content 属性为例进行讲解，align-content 属性同理，只是方向为垂直方向

start - 对齐容器的起始边框 end - 对齐容器的结束边框 center - 容器内部居中

.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 - 项目大小没有指定时，拉伸占据整个网格容器
.wrapper-3 {
  justify-content: space-around;
}
.wrapper-4 {
  justify-content: space-between;
}
.wrapper-5 {
  justify-content: space-evenly;
}
.wrapper-6 {
  justify-content: stretch;
}

grid-auto-columns、 grid-auto-rows​

在讲 grid-auto-columns 属性和 grid-auto-rows 属性之前，先来看看隐式和显式网格的概念

  • 隐式和显式网格：显式网格包含了你在 grid-template-columns 和 grid-template-rows 属性中定义的行和列。
  • 如果你在网格定义之外又放了一些东西，或者因为内容的数量而需要的更多网格轨道的时候，网格将会在隐式网格中创建行和列
  • 假如有多余的网格（也就是上面提到的隐式网格），那么它的行高和列宽可以根据 grid-auto-columns 属性和 grid-auto-rows 属性设置。
  • 它们的写法和 grid-template-columns 和 grid-template-rows 完全相同。
  • 如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。
.wrapper {
  display: grid;
  grid-template-columns: 200px 100px;
  /*  只设置了两行，但实际的数量会超出两行，超出的行高会以 grid-auto-rows 算 */
  grid-template-rows: 100px 100px;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}
  • grid-template-columns 属性和 grid-template-rows 属性只是指定了两行两列，但实际有九个元素，就会产生隐式网格。
  • 通过 grid-auto-rows 可以指定隐式网格的行高为 50px

项目属性介绍​

grid-column-start、grid-column-end、grid-row-start、 grid-row-end​

可以指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置

  • grid-column-start 属性：左边框所在的垂直网格线
  • grid-column-end 属性：右边框所在的垂直网格线
  • grid-row-start 属性：上边框所在的水平网格线
  • grid-row-end 属性：下边框所在的水平网格线
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column-start: 1;
  grid-column-end: 2;
  background: #19caad;
}
.two {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  /*   如果有重叠，就使用 z-index */
  z-index: 1;
  background: #8cc7b5;
}
.three {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
  background: #d1ba74;
}
.four {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 5;
  background: #bee7e9;
}
.five {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 5;
  background: #e6ceac;
}
.six {
  grid-column: 3;
  grid-row: 4;
  background: #ecad9e;
}

上面代码中，

  • 类 .two 所在的网格项目，垂直网格线是从 2 到 4，水平网格线是从 1 到 2。
  • 其中它跟 .three （垂直网格线是从 3 到 4，水平网格线是从 1 到 4） 是有冲突的。
  • 可以设置 z-index 去决定它们的层级关系

grid-area​

  • grid-area 属性指定项目放在哪一个区域，
  • 在上面介绍 grid-template-areas 的时候有提到过，这里不再具体展开，具体的使用可以参考演示地址：

justify-self、align-self、 place-self​

  • justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目
  • align-self 属性设置单元格内容的垂直位置（上中下），跟 align-items 属性的用法完全一致，也是只作用于单个项目
  • 两者很相像，这里只拿 justify-self 属性演示，align-self 属性同理，只是作用于垂直方向。
  • place-self 是设置 align-self 和 justify-self 的简写形式，这里也不重复介绍。
.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
.item {
  justify-self: start;
}
.item-1 {
  justify-self: end;
}
.item-2 {
  justify-self: center;
}
.item-3 {
  justify-self: stretch;
}
  • start：对齐单元格的起始边缘
  • end：对齐单元格的结束边缘
  • center：单元格内部居中
  • stretch：拉伸，占满单元格的整个宽度（默认值）

Grid 实战——实现响应式布局​

  • 经过上面的介绍，相信大家都可以看出，Grid 是非常强大的。
  • 一些常见的 CSS 布局，如居中，两列布局，三列布局等等是很容易实现的。
  • 我们接下来看看 Grid 布局是如何实现响应式布局的

fr 实现等分响应式​

  • fr 等分单位，可以将容器的可用空间分成想要的多个等分空间。
  • 利用这个特性，我们能够轻易实现一个等分响应式。
  • grid-template-columns: 1fr 1fr 1fr 表示容器分为三等分
.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

repeat + auto-fit——固定列宽，改变列数量​

  • 等分布局并不只有 Grid 布局才有，像 flex 布局也能轻松实现，接下来看看更高级的响应式
  • 上面例子的始终都是三列的，但是需求往往希望我们的网格能够固定列宽，并根据容器的宽度来改变列的数量。
  • 这个时候，我们可以用到上面提到 repeat() 函数以及 auto-fit 关键字。
  • grid-template-columns: repeat(auto-fit, 200px) 表示固定列宽为 200px，数量是自适应的，只要容纳得下，就会往上排列，代码以及效果实现如下：
.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

repeat+auto-fit+minmax 去掉右侧空白​

  • 上面看到的效果中，右侧通常会留下空白，这是我们不希望看到的。
  • 如果列的宽度也能在某个范围内自适应就好了。
  • minmax() 函数就帮助我们做到了这点。
  • 将 grid-template-columns: repeat(auto-fit, 200px) 改成 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
  • 表示列宽至少 200px ，如果还有空余则一起等分。
  • 代码以及效果如下所示
.wrapper {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

repeat+auto-fit+minmax-span-dense 解决空缺问题​

  • 似乎一切进行得很顺利，但是某天 UI 来说，每个网格元素的长度可能不相同，
  • 这也简单，通过 span 关键字进行设置网格项目的跨度，grid-column-start: span 3，表示这个网格项目跨度为 3。
  • 具体的代码与效果如下所示：
.item-3 {
  grid-column-start: span 3;
}
  • 不对，怎么右侧又有空白了？原来是有一些长度太长了，放不下，这个时候就到我们的 dense 关键字出场了。
  • grid-auto-flow: row dense 表示尽可能填充，而不留空白，代码以及效果如下所示：
.wrapper,
.wrapper-1 {
  margin: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px 20px;
  grid-auto-rows: 50px;
}

.wrapper-1 {
  grid-auto-flow: row dense;
}

Grid 布局兼容性​

  • 在 caniuse 中，可以看到，总体兼容性还不错，但在 IE 10 以下不支持。

参考​