css 网格布局

介绍

网格是一组相交的水平线和垂直线，它定义了网格的列和行。

CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。

以下是一个简单的网页布局，使用了网格布局，包含六列和三行：

网格布局初体验

1、html 结构

• 父元素 网格布局需要一个网格容器，然后在网格容器里面进行网格布局

<div class="container">....</div>

• 子元素 网格布局首先要确认，需要把网格容器划分成为几行几列，注意，是合并单元格前的行和列，然后再算出需要多少个子元素（行 × 列 = 元素个数）

例如，我们要 3 行 4 列，那么结构如下

<div class="container">
  <!--提示：vscode快捷生成子元素： div.item{$}*12 回车 -->
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>

2、css 样式

• 父元素（网格容器）

.container {
  /* 1、开启网格布局,对直接子元素生效 */
  display: grid;
  /* 2. 设置行数和行宽度, 3行， 每行100px*/
  grid-template-rows: 100px 100px 100px;
  /* 3. 设置列数和列宽度 4列，每列200px*/
  grid-template-columns: 200px 200px 200px 200px;
}

到这里就已经实现了网格布局了

为了看的清楚一点，加点颜色区分

.container {
  /* ..网格属性...... */

  background-color: pink;
}
.item {
  border: 1px solid #fff;
  background-color: orange;
}

3、效果图

效果如下

行高和列宽的普通单位

我们通过 grid-template-columns定义列 和 grid-template-rows 定义行。

网格布局设置行高和列宽时候，单位可以是任意的单位，例如：像素（px）、百分比（100%）、auto 等，有几个值就表示又几行或几列

例如：

/* 有4列，每一列都是自动宽度，最终会撑满父容器宽度 */
grid-template-columns: auto auto auto auto;

/* 有2行，第一行占父容器高度的一半，第二行固定高度200px, 可能会无法撑满父级容器 */
grid-template-rows: 50% 200px;

fr 单位

网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。

可以理解为比例关系，且会自适应

例如：定义三个相等宽度的轨道

/* 以下实例定义了一个网格定义将创建三个相等宽度的轨道，这些轨道会随着可用空间增长和收缩。 */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

repeat()函数简化重复代码

repeat()是 css 的函数，具体可以看文档 repeat()文档

.grid-container {
  display: grid;
  /* grid-template-columns: 1fr 1fr 1fr; */
  grid-template-columns: repeat(3, 1fr);

  /* grid-template-rows: 200px 200px 1fr 1fr; */
  grid-template-rows: repeat(2, 200px) repeat(2, 1fr);
}

网格间距

网格间距（Column Gap）指的是两个网格单元之间的网格横向间距或网格纵向间距。

以使用以下属性来调整间隙大小：

• grid-column-gap：设置列间距
• grid-row-gap：设置行间距
• grid-gap：grid-row-gap 和 the grid-column-gap 属性的简写，以同时设置行间距和列间距

例如：使用 grid-column-gap 属性来设置列之间的网格间距：

.grid-container {
  display: grid;

  /* 列间距50px */
  grid-column-gap: 50px;

  /* 行间距50px */
  grid-row-gap: 50px;

  /* 行间距50px，列间距100px */
  grid-gap: 50px 100px;

  /* 行间距和列间距都是50px */
  grid-gap: 50px;
}

跨列合并

语法：grid-column: span 跨的列数

span 表示要跨越，后面跟随要跨的列数，

TIP

注意：删掉的格子应该是对应的，例如，我要跨列合并 1 和 2 号格子，那么应该注释格子 2

示例：合并 1 2 号格子

<style>
  .container {
    height: 600px;
    width: 600px;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(4, 1fr);
    background-color: pink;
  }

  .item {
    border: 2px solid #fff;
    background-color: orange;
  }

  .column-span2 {
    /* 跨2列合并 */
    grid-column: span 2;
  }
</style>

<div class="container">
  <div class="item column-span2">1</div>
  <!-- <div class="item">2</div> -->
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>

跨行合并

同跨列合并，线确认好要合并的格子，然后保留第一号格子，注释其余格子（必须是对应的格子，不能按序号来注释），给第一号格子加合并样式

例如：跨行合并 8、9、12 号格子

<style>
  /* ..... */

  .column-span2 {
    /* 跨2列合并 */
    grid-column: span 2;
  }

  .row-span3 {
    grid-row: span 3;
  }
</style>

<div class="container">
  <div class="item column-span2">1</div>
  <!-- <div class="item">2</div> -->
  <div class="item">3</div>
  <div class="item row-span3">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <!-- <div class="item">8</div> -->
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <!-- <div class="item">12</div> -->
</div>

同时跨行和跨列

例如：合并 5、6、9、10 号格子

<style>
  /* ..... */

  .row-column-span {
    /* 分开写 */
    grid-row: span 2;
    grid-column: span 2;

    /* 或者简写 先行 后列 */
    grid-area: span 2 / span 2;
  }
</style>

<div class="container">
  <div class="item column-span2">1</div>
  <!-- <div class="item">2</div> -->
  <div class="item">3</div>
  <div class="item row-span3">4</div>
  <div class="item row-column-span">5</div>
  <!-- <div class="item">6</div> -->
  <div class="item">7</div>
  <!-- <div class="item">8</div> -->
  <!-- <div class="item">9</div> -->
  <!-- <div class="item">10</div> -->
  <div class="item">11</div>
  <!-- <div class="item">12</div> -->
</div>

相关教程

• 菜鸟教程