CSS 网格布局

概述

CSS 网格布局是一种全新的 CSS 布局方式，它能够使我们更加轻松地实现复杂的网页布局，同时可以帮助我们更好地控制子元素的位置和大小。网格布局由两个主要概念组成：网格容器和网格项目。网格容器是包括网格项目的父元素，它可以在水平和垂直方向上分成多个网格行和网格列。网格项目是网格容器内的子元素，它可以被布局到任何一个网格单元格内，并可以调整其大小和位置。

创建网格容器

要使用网格布局，我们需要将一个元素指定为网格容器。下面是指定元素 div 为网格容器的语法：

div {
  display: grid;
}

这将创建一个默认的网格布局，它有一行和一列。我们可以使用 grid-template-rows 和 grid-template-columns 属性来指定网格的行和列的大小和数量。例如，下面的代码将创建一个具有两行和三列的网格布局：

div {
  display: grid;
  grid-template-rows: 100px 200px;
  grid-template-columns: 100px 200px 300px;
}

此代码将创建一个具有两行和三列的网格布局，第一行的高度是 100 像素，第二行的高度是 200 像素，第一列的宽度是 100 像素，第二列的宽度是 200 像素，第三列的宽度是 300 像素。

网格项目

网格项目是网格容器内的子元素，它可以放置在任何一个网格单元格内。每个网格项目都有自己的位置和大小，可以沿着网格行和网格列自由移动和调整大小。

要将元素指定为网格项目，我们需要使用 grid-row 和 grid-column 属性来指定其位置。例如，下面的代码将元素 div1 放置在网格布局的第一行第二列：

div1 {
  grid-row: 1;
  grid-column: 2;
}

这意味着元素 div1 将占据网格布局中的第一行第二列。我们还可以通过指定 grid-row-start，grid-row-end，grid-column-start，grid-column-end 属性来更精确地控制网格项目的位置和大小。例如，下面的代码将元素 div1 放置在网格布局的第二行第二列，跨越两个网格单元格：

div1 {
  grid-row-start: 2;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 3;
}

在这个例子中，元素 div1 将被放置在网格布局的第二行第二列，并跨越两个网格单元格。

网格间距

网格间距是网格行和网格列之间的间隔。默认情况下，网格间距为 0。我们可以使用 grid-row-gap 和 grid-column-gap 属性来指定行之间和列之间的间距大小。例如，下面的代码将创建一个具有 10 像素行间距和 20 像素列间距的网格布局：

div {
  display: grid;
  grid-template-rows: 100px 200px;
  grid-template-columns: 100px 200px 300px;
  grid-row-gap: 10px;
  grid-column-gap: 20px;
}

网格自适应

网格布局可以根据网格容器的大小自动调整网格行和网格列的大小。我们可以使用 grid-auto-rows 和 grid-auto-columns 属性来指定自适应网格行和网格列的大小。例如，下面的代码将创建一个具有 100 像素自适应网格行的网格布局：

div {
  display: grid;
  grid-auto-rows: 100px;
}

这意味着如果网格容器的高度足够大，它将包含尽可能多的 100 像素网格行。如果网格容器的高度不够大，它将只包含尽可能多的 100 像素网格行，而剩余的网格行将被滚动。

实例代码

下面是一个使用网格布局创建网页的例子：

<div class="container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

-- -------------------- ---- -------
---------- -
  -------- -----
  ------------------- ----- --- -----
  ---------------------- ----- ----
  ------------- -----
  ---------------- -----
-

------- -
  --------- --
  ------------ - - --
-

-------- -
  --------- - - --
  ------------ --
-

-------- -
  --------- --
  ------------ --
-

------- -
  --------- --
  ------------ - - --
-
展开代码

此代码将创建一个包含头部、侧栏、内容和底部的网页布局。头部占据整个第一行，内容占据第二行第二列，底部占据整个第三行，侧栏占据第二到第四行的第一列。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bad95b306f20b3a69f2905