在当今现代Web设计中，如何实现有效的布局一直是一个关键问题。这就是为什么CSS3推出了“grid网格布局”作为一种新的布局方式。使用grid，您可以轻松地设置复杂的网格布局，而无需使用冗长的CSS代码或框架。本文将探讨grid的概念、语法和实际应用，帮助您在设计Web页面时更加灵活和高效。

一、什么是grid网格布局

CSS的Grid网格布局是一种用于创建网格样式布局的CSS布局方式。Grid布局将网格划分为多个行和列，在网格所占空间内放置元素，并确定它们在网格中的位置。使用Grid布局可以实现更加复杂的布局，如媒体网格、交互式网格等。因为它具有灵活性和强大的功能，所以越来越多的网站使用Grid布局来设计它们的页面。

Grid网格布局可以做到以下事情：

创建复杂的网格：利用Grid布局可以轻松地创建多行多列的网格，从而实现更复杂的页面布局。
响应式设计：Grid布局可以适应不同屏幕大小和设备类型，从而实现响应式设计。
自定义对齐：Grid布局允许开发人员自定义对齐方式，包括水平对齐、垂直对齐和对角线对齐。

下面是几个比较成功的案例：

亚马逊的电子书阅读器Kindle的官方网站使用了Grid布局，将各种相关产品排列在网格中，同时给人留下清晰、易于查找的印象。
https://www.amazon.cn/b?node=1536596071
时尚杂志《Vogue》的网站使用了Grid布局，并将网页元素放置在不同的网格单元中。该网站的布局简洁明了，让阅读体验更为舒适和顺畅。
https://www.vogue.com.cn/

二、grid容器常用属性

在这里插入图片描述

Grid网格布局的网格容器共有以下常用属性：

display：定义该元素为网格容器
grid-template-columns：定义网格布局中各列的宽度、间距等信息
grid-template-rows：定义网格布局中各行的高度、间距等信息
grid-template-areas：定义网格布局中各区域的位置和名称
grid-template：同时定义网格布局中各列、各行和各区域的大小和位置信息
grid-column-gap/grid-row-gap：定义网格布局中各列之间/各行之间的间距大小
grid-gap：同时定义网格布局中各列和各行之间的间距大小
justify-items：定义网格容器中所有网格项在水平方向上的对齐方式
align-items：定义网格容器中所有网格项在垂直方向上的对齐方式
justify-content：定义网格容器中所有网格项在水平方向上的对齐方式
align-content：定义网格容器中所有网格项在垂直方向上的对齐方式
grid-auto-columns：定义没有显式指定宽度的网格列的大小
grid-auto-rows：定义没有显式指定高度的网格行的大小
grid-auto-flow：定义网格布局自动生成网格项的顺序
grid：简写属性，同时定义网格模板、列和行的大小，以及行列之间的间距
grid-area：定义一个网格项所在的位置和跨度

这些属性可以结合使用，实现复杂的网格布局效果。比如利用 grid-template-columns 和 grid-template-rows 定义网格的行列大小，利用 grid-template-areas 定义区域位置，实现自定义的网格布局。

1. display:grid

display: grid; 是css中一个布局模式，通过此属性，我们可以将一个HTML元素定义为网格容器，它的直接子元素自动成为网格项。网格项的大小会自适应于容器中的可用空间，也可以手动进行设置。

这样可以实现非常灵活和强大的布局设计，无论是两维布局还是复杂的项目布局，这种方式都能够很好地处理。

举个例子：

HTML部分:

<div class='grid-container'>
  <div class='grid-item item1'>1</div>
  <div class='grid-item item2'>2</div>
  <div class='grid-item item3'>3</div>
  <div class='grid-item item4'>4</div>
  <div class='grid-item item5'>5</div>
</div>

CSS部分:

.grid-container {
    
    
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
    
    
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}

在这里插入图片描述

在这个例子中, 我们将.grid-container定义为一个网格容器，并设定了三列，每个网格项之间的间隔为10px。每个直接的子元素(.grid-item)都自动成为了网格项。

这里主要介绍display属性了解其概念，容器中的其他grid属性作用下面会做详细介绍，

2. grid-template-columns

grid-template-columns 属性在 CSS 网格布局中用于定义每一列的宽度。
完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .grid-container {
      
      
          display: grid;
          grid-template-columns: auto auto auto;
          /* grid-template-columns: 100px 200px 100px; */
          /* grid-template-columns: 1fr 2fr 1fr; */
          /* grid-template-columns: repeat(3, 1fr); */
          grid-gap: 10px;
          background-color: #2196f3;
          padding: 10px;
        }
  
        .grid-item {
      
      
          background-color: rgba(255, 255, 255, 0.8);
          text-align: center;
          padding: 20px;
          font-size: 30px;
        }
      </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
        <div class="grid-item">10</div>
        <div class="grid-item">11</div>
        <div class="grid-item">12</div>
      </div>
</body>
</html>

1. auto

.container {
    
    
  display: grid;
  grid-template-columns: auto auto auto;
}

在这里插入图片描述
grid-template-columns: auto auto auto将子项设置按照三列自适应布局

2.指定每一列的宽度

例如：

.container {
    
    
  display: grid;
  grid-template-columns: 100px 200px 100px;
}

在这里插入图片描述

这样设置后，容器会被划分为三列，第一列宽度为 100px，第二列宽度为 200px，第三列宽度为 100px。

3.fr

在CSS Grid布局中，fr是一个新的单位，代表fraction（分数、比例）。这个单位用来描述网格容器中可用空间的一份。

如果所有列的宽度都用fr单位定义，那么每一列将占据容器总宽度的等比例。例如，如果你定义一个三列的网格，每一列宽度均为1fr，那么每一列将均等分布总宽度的三分之一。如果你把其中一列变为2fr，那么这一列将占据总宽度的二分之一，其他两列各占据四分之一。

相同的，fr单位也适用于定义行的高度。

这个单位非常灵活，使得网格布局能灵活响应不同尺寸的视窗和改变的内容。

使用 fr 单位,例如：

.container {
    
    
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

在这里插入图片描述

这样设置后，容器同样会被划分为三列，第一列、第三列占可用空间的 1/4，第二列占可用空间的 1/2。

4. repeat()

repeat()函数在CSS的Grid布局中有着非常重要的作用。它的主要作用是将复杂的网格定义简化，使之更加清晰易读。

具体来说，repeat()函数可以定义一组重复的列和行的大小。例如，如果你想要一个有10列、每列宽度为100px的网格，你可以这样写：

grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px;

这种写法虽然可以实现需求，但一旦列数增多，这种方法就变得庞大且难以维护。这个时候，你就可以利用repeat()函数将其简化为：

grid-template-columns: repeat(10, 100px);

以上两个示例实现的效果相同，但后者明显更简单易懂。

所以，总结一下，repeat()函数就是用于简化CSS Grid布局中复杂的行/列定义的工具。

结合 repeat() 函数使用，例如：

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

在这里插入图片描述

这样设置后，容器会被划分为三列，每列占可用空间的1/3。

3. grid-template-rows

grid-template-rows是CSS网格布局的一个属性，用于定义网格的行尺寸。你可以设置固定尺寸，比如说像素值，或者相对尺寸，例如某个元素的高度的百分比。

例如，你有一个网格，你想要它有三行，其中第一行的高度是50像素，第二行的高度是自适应，第三行的高度是30%的剩余空间。这是相应的CSS：

.container {
    
    
  display: grid;
  grid-template-rows: 50px auto 30%;
}

在这里插入图片描述

在这个例子里，.container就会被分成了三行。第1行50px高，第2行由包含的内容决定高度，第3行则会占据30%的剩余空间。这意味着，如果你的网格容器的总高度是500像素，第三行的高度就变成了 (500px - 50px - 第二行的高度)的30%。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .grid-container {
      
      
          display: grid;
          grid-template-columns: auto auto auto;
          grid-template-rows: 50px auto 30%;
          grid-gap: 10px;
          background-color: #2196f3;
          padding: 10px;
          height: 500px;
        }
  
        .grid-item {
      
      
          background-color: rgba(255, 255, 255, 0.8);
          padding: 20px;
          font-size: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
      </div>
</body>
</html>

当然它也可以结合fr,repeat等使用，就不在赘述了，和grid-template-columns是一样的

这种方式为我们提供了一种灵活且有效的布局方法，尤其在响应式设计中尤其有用。

4. grid-template-areas和grid-area

grid-template-areas 属性在 CSS 网格布局中定义一个网格模板。通过引用 grid-area 属性定义的网格区域名称（不一定要给每个网格区域一个名称），你可以定义创建复杂的网格布局。grid-template-areas 用于设定网格布局的结构。

每个字符串代表一行，每个单词代表一个网格区域。空白字符代表空白区域。

例如，你有如下的 HTML 结构：

<div class="grid">
  <div class="item a">A</div>
  <div class="item b">B</div>
  <div class="item c">C</div>
  <div class="item d">D</div>
</div>

你可以使用 grid-template-areas 来定义网格布局：

.grid {
    
    
  display: grid;
  grid-template-areas:
    "header header header"
    "menu main main"
    "footer footer footer";
}

.item.a {
    
    
  grid-area: header;
}

.item.b {
    
    
  grid-area: menu;
}

.item.c {
    
    
  grid-area: main;
}

.item.d {
    
    
  grid-area: footer;
}

在这里插入图片描述

在上述代码中，grid-template-areas 属性定义了一个 3 行的网格模板。

第一行（“header header header”）完全由 header 区域占用。
第二行由 menu 区域占用第一列，main 区域占用剩余的两列。
第三行（“footer footer footer”）完全被 footer 区域占用。

然后，你可以通过在每个项目中使用 grid-area 属性来指定每个项目的位置。例如，item a 被放置在 header 区域，item b 被放置在 menu 区域，以此类推。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .grid {
      
      
        display: grid;
        grid-template-rows: 100px auto 100px;
        grid-template-areas:
          "header header header"
          "menu main main"
          "footer footer footer";
        grid-gap: 10px;
        background-color: #2196f3;
        padding: 10px;
        height: 800px;
      }
      .item {
      
      
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px;
        font-size: 30px;
      }
      .item.a {
      
      
        grid-area: header;
      }

      .item.b {
      
      
        grid-area: menu;
      }

      .item.c {
      
      
        grid-area: main;
      }

      .item.d {
      
      
        grid-area: footer;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="item a">A</div>
      <div class="item b">B</div>
      <div class="item c">C</div>
      <div class="item d">D</div>
    </div>
  </body>
</html>

这样，你就可以通过 CSS 网格布局和 grid-template-areas 属性来创建复杂的网格布局。

5. grid-template

grid-template属性在CSS的网格布局中非常重要，它用于定义网格的行和列，从而创建一个网格布局模板。

grid-template是个简写属性，包括了如下属性：

grid-template-rows
grid-template-columns
grid-template-areas

以下是一些使用grid-template属性的例子：

1. 定义行和列大小

.container {
    
    
  display: grid;
  grid-template: 200px 300px / 50% 50%;
}

这个代码将会创建一个网格，其中有两行，第一行的高度为200px，第二行的高度为300px。然后，这个网格有两列，每列都占父元素宽度的50%。

2. 定义网格区域

.container {
    
    
  display: grid;
  grid-template: 
    "header header header" 50px
    "sidebar content content" 200px
    "footer footer footer" 50px / 100px 1fr 1fr;
}

这个代码将会创建一个网格，其中有三行，分别为header，content和footer。每个行的高度分别为50px，200px和50px。明确定义了名为header，content，sidebar和footer的4个区域。而列的大小，则是第一列100px，后两列各为1份可用空间。

最后，这个代码将会创建一个复杂的网格布局，其中包括header，content，sidebar和footer四个区域。

3. 重构示例4

核心代码：

grid-template:
  "header header header" 100px
  "menu main main" auto
  "footer footer footer" 100px
   / 1fr 1fr 1fr;

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .grid {
      
      
        display: grid;
        /* grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 100px auto 100px;
        grid-template-areas:
          "header header header"
          "menu main main"
          "footer footer footer"; */
        grid-template:
          "header header header" 100px
          "menu main main" auto
          "footer footer footer" 100px
          / 1fr 1fr 1fr;
        grid-gap: 10px;
        background-color: #2196f3;
        padding: 10px;
        height: 800px;
      }
      .item {
      
      
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px;
        font-size: 30px;
      }
      .item.a {
      
      
        grid-area: header;
      }

      .item.b {
      
      
        grid-area: menu;
      }

      .item.c {
      
      
        grid-area: main;
      }

      .item.d {
      
      
        grid-area: footer;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="item a">A</div>
      <div class="item b">B</div>
      <div class="item c">C</div>
      <div class="item d">D</div>
    </div>
  </body>
</html>

示例效果：
在这里插入图片描述

6. grid-gap、grid-column-gap、grid-row-gap

1. 网格间隙

在CSS中，grid-garp/grid-column-gap/grid-row-gap这三个属性被用来创建网格之间的间隙。

grid-gap：是grid-row-gap，grid-column-gap设置行列之间的间隙，第一个值是行间隔，第二个值是列间隔。例如，grid-gap: 10px 15px; 这表示行间隔是10px，列间隔是15px。若只设一个值，行列间隔都是这个值。
grid-column-gap：设置列之间的间隙。例如，grid-column-gap: 10px; 这表示列间隔是10px。
grid-row-gap：设置行之间的间隔。例如，grid-row-gap: 20px; 这表示行间隔是20px。

例如，假设你有一个3行3列的网格，你可以使用以下代码来设置行和列之间的间隙：

.container {
    
    
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px 30px;
}

在这个例子中，grid-gap: 10px 30px; 设定了行间隔为10px，列间隔为30px。也可以分别使用 grid-column-gap: 10px; 和 grid-row-gap: 30px; 来达到同样的效果。

注意，这些间隙仅存在于网格单元之间，不会在网格容器的边缘应用。

完整案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .grid {
      
      
        display: grid;
        /* grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 100px auto 100px;
        grid-template-areas:
          "header header header"
          "menu main main"
          "footer footer footer"; */
        grid-template:
          "header header header" 100px
          "menu main main" auto
          "footer footer footer" 100px
          / 1fr 1fr 1fr;
        grid-gap: 10px 30px;
        /* grid-row-gap: 10px;
        grid-column-gap: 30px; */
        background-color: #2196f3;
        padding: 10px;
        height: 800px;
      }
      .item {
      
      
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px;
        font-size: 30px;
      }
      .item.a {
      
      
        grid-area: header;
      }

      .item.b {
      
      
        grid-area: menu;
      }

      .item.c {
      
      
        grid-area: main;
      }

      .item.d {
      
      
        grid-area: footer;
      }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="item a">A</div>
      <div class="item b">B</div>
      <div class="item c">C</div>
      <div class="item d">D</div>
    </div>
  </body>
</html>

在这里插入图片描述

2. 网格间隙简写

grid-garp/grid-column-gap/grid-row-gap这三个属性主要用在grid中，后来发现flex中也会有设置间隙的应用场景，所以就推出了下面的简写形式。
gap、column-gap 和 row-gap 这三个属性被用于设置 grid 或 flex 布局中的网格间隙。

gap：该属性是 row-gap 和 column-gap 的简写形式，用于一次性设置行与列的间距。例如，gap: 10px 20px; 会将行间距设置为 10px，列间距设置为 20px。
column-gap：该属性用于设置列间距。例如，column-gap: 15px; 会将列间距设置为 15px。
row-gap：该属性用于设置行间距。例如，row-gap: 10px; 会将行间距设置为 10px。

以下是一个 HTML 和 CSS 的简单例子，用于说明这三个属性的使用：

在grid中应用

<div class="grid">
  <div>元素一</div>
  <div>元素二</div>
  <div>元素三</div>
</div>

.grid {
    
    
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  gap: 10px 20px;  /* 行间距为10px，列间距为20px */
}

在这个例子中，有一个具有三个子元素的 grid 容器，gap 属性使得这些子元素之间的行距为10px，列距为20px。

在flex中应用

在flex布局中，当建立一个flex容器（即display为flex或inline-flex的元素）时，可以应用这些属性来决定项目之间的间隔。

例如：

HTML代码：

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS代码：

.container {
    
    
  display: flex; /* 定义为flex布局 */
  gap: 10px; /* 所有子项目之间的间隔都为10px */
}

/* 或分别设置行间距和列间距 */

.container {
    
    
  display: flex; /* 定义为flex布局 */
  column-gap: 10px; /* 子项横向间隔为10px */
  row-gap: 20px; /* 子项纵向间隔为20px */
}

在以上例子中，如果.container的flex-direction属性为row（默认值）或row-reverse，那子项目之间的间隔都会是10px。如果flex-direction属性为column或column-reverse，子项目的前后间隔将会是20px。

7.justify-items、align-items、place-items

在CSS中，grid 布局有一些属性，包括 justify-items，align-items和 place-items，它们主要用来设置网格中子项目的对齐方式。

justify-items：这个属性用来控制网格中子项目在行轴（行轴水平）上的对齐方式。例如 justify-items: start 就会把子项目向行轴开头对齐。
align-items：这个属性用来控制子项目在列轴（列轴是垂直的）上的对齐方式。例如 align-items: end 就会把所有项目向列轴的尾部对齐。
place-items：这个属性是 align-items 和 justify-items 的合并属性，可以同时设置行轴和列轴的对齐方式。例如 place-items: center 就会让所有子项目在行轴和列轴上都居中。

对齐方式有五个可选参数：start、end、center、stretch以及space-between。分别表示从起始位置开始、从结束位置开始、居中、拉伸以及各网格之间间隔相同。默认是stretch拉伸。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .grid-container {
      
      
          display: grid;
          grid-template-columns: repeat(3, 200px);
          grid-template-rows: repeat(3, 200px);
          grid-gap: 10px;
          background-color: #2196f3;
          padding: 10px;
          width: 800px;
          height: 800px;
        }
  
        .grid-item {
      
      
          width: 60px;
          height: 60px;
          background-color: rgba(255, 255, 255, 0.8);
          font-size: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
      </div>
</body>
</html>

效果如下：
在这里插入图片描述
这是一个以网格形式展示的 3x3 布局示例，给了.grid-container 800*800大小，3*3父盒子大小是200*200，子盒子大小是60*60，
这样设置大小以后可以看到，默认情况下子盒子在父盒子中的排列方式是左上角布局，就相当行和列都设置了start对齐方式place-items: start;

我们通过设置justify-items行轴上的对齐方式，align-items列轴上的对齐方式，来让子盒子在父盒子中居中对齐，如下：

.grid-container{
    
    
  display: grid;
  justify-items: center;  /*行轴上的对齐方式*/
  align-items: center; /*列轴上的对齐方式*/
  /* 或者使用缩写方式 */
  /* place-items: center; */
}

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .grid-container {
      
      
          display: grid;
          grid-template-columns: repeat(3, 200px);
          grid-template-rows: repeat(3, 200px);
          grid-gap: 10px;
          background-color: #2196f3;
          padding: 10px;
          width: 800px;
          height: 800px;
          justify-items: center; 
          align-items: center;
          /* 或者使用缩写方式 */
          /* place-items: center; */
        }
  
        .grid-item {
      
      
          width: 60px;
          height: 60px;
          background-color: rgba(255, 255, 255, 0.8);
          font-size: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
      </div>
</body>
</html>

效果如下：
在这里插入图片描述

8. justify-content、align-content、place-conten

justify-content、align-content和place-content这三个属性在grid布局中主要涉及到网格中内容的对齐方式，也就是整体网格的对齐方式，这些属性生效的前提是网格的宽度小于容器的宽度。

justify-content：用于确定行轴上的对齐方式。如果网格的宽度小于容器的宽度，这个属性就会生效。比如：

.container {
    
    
    display: grid;
    justify-content: start; // 使得所有的网格项都在行轴的起始位置开始排列
}

align-content：用于确定列轴上的对齐方式。如果网格的高度小于容器的高度，这个属性就会生效。比如：

.container {
    
    
    display: grid;
    align-content: end; // 使得所有的网格项都在列轴的结束位置开始排列
}

place-content：是一个简写属性，用于同时设置justify-content和align-content。比如：

.container {
    
    
    display: grid;
    place-content: center center; //分别设置行轴和列轴的对齐方式为"center"，使得网格内容在容器中水平垂直居中
}

注意：上述代码中的对齐方式有五个可选参数：start、end、center、stretch以及space-between。分别表示从起始位置开始、从结束位置开始、居中、拉伸以及各网格之间间隔相同。需要根据实际布局需求选择合适的值。

使用place-content:center，让整个网格盒子，在容器中居中布局，示例如下：

效果：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .grid-container {
      
      
        display: grid;
        grid-template-columns: repeat(3, 200px);
        grid-template-rows: repeat(3, 200px);
        grid-gap: 10px;
        background-color: #2196f3;
        padding: 10px;
        width: 800px;
        height: 800px;
        /* justify-content: space-evenly;
            align-content: end; */
        place-content: center;
      }

      .grid-item {
      
      
        background-color: rgba(255, 255, 255, 0.8);
        font-size: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>
      <div class="grid-item">7</div>
      <div class="grid-item">8</div>
      <div class="grid-item">9</div>
    </div>
  </body>
</html>

9. grid-auto-columns、grid-auto-rows、grid-auto-flow

grid-auto-columns用来设置自动列的宽度，适用于当grid-template-columns属性未创建足够的列时创建额外列的情况。
grid-auto-rows用来设置自动行的高度，适用于grid-template-rows属性未创建足够的行时创建额外行的情况。
grid-auto-flow用来控制网格自动布局算法的行为。默认情况下，网格布局会先填充行，然后再填充列。如果grid-auto-flow设置为column，那么就会改变这个行为，先填充列，然后再填充行。

grid-auto-columns和grid-auto-rows属性用来设置网格中隐式（即开发者在grid-template-rows或grid-template-columns中没有明确定义）行或列的大小。这些属性只对隐式线轴道有影响，显式线轴道（即我们明确使用grid-template-rows或grid-template-columns创建的线轴道）的大小仍然由我们明确设置的规则确定。

比如：

.container {
    
    
   display: grid;
   grid-template-columns: 200px;
   grid-auto-rows: 100px;
}

这段CSS定义了一个网格容器，其中显式定义的列宽为200px，而所有隐式的行的高度都将被设置为100px。

grid-auto-flow属性用来控制网格元素的放置顺序。它的可能值有row，column，row dense，column dense。

row：自动的网格元素按行列出。这是默认值。
column：自动的网格元素按列列出。
row dense：类似于row，但该算法试图填充现有空洞而不是严格从左到右，从上到下。
column dense：类似于column，但该算法试图填充现有空洞而不是严格从上到下，从左到右。

例如：

.container {
    
    
    display: grid;
    grid-auto-flow: row;
}

这段代码定义了一个网格容器，在此容器中，自动的网格元素将按行列出。这是默认值，因此省略grid-auto-flow属性将得到相同的结果。

以下是这些属性的一个使用示例：

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
   <style>
     .container {
      
      
       display: grid;
       grid-template-columns: 100px 100px;
       grid-auto-columns: 100px;
       grid-template-rows: 100px 100px;
       grid-auto-rows: 100px;
       grid-auto-flow: row;
       grid-gap: 10px;
       background-color: #2196f3;
       padding: 10px;
       width: 800px;
       height: 800px;
     }

     .container > div {
      
      
       background-color: rgba(255, 255, 255, 0.8);
       font-size: 30px;
       display: flex;
       align-items: center;
       justify-content: center;
     }
   </style>
 </head>
 <body>
   <div class="container">
     <div class="item1">1</div>
     <div class="item2">2</div>
     <div class="item3">3</div>
     <div class="item4">4</div>
     <div class="item5">5</div>
     <div class="item6">6</div>
   </div>
 </body>
</html>

效果如下：

在这里插入图片描述
在这个示例中，容器提供了一个2x2的网格，但是有6个项目需要布局。由于grid-auto-columns和grid-auto-rows的设置，所以容器会自动创建新的行和列来容纳更多的项目。然后，由于grid-auto-flow设为row，所以容器会先按行布局项目，然后再按列布局。

当grid-auto-flow设为column时效果如下：
在这里插入图片描述

以上就是css中grid布局中的grid-auto-columns、grid-auto-rows、grid-auto-flow属性的功能及其用例。

三、grid子项常用属性

在这里插入图片描述

grid-column-start: 指定格子的开始位置。
grid-column-end: 指定格子的结束位置。
grid-row-start: 指定行的开始位置。
grid-row-end: 指定行的结束位置。
grid-area: 设置网格子项的行/列开始和结束位置，是前面四个属性的合并简写形式，按照"grid-row-start / grid-column-start / grid-row-end / grid-column-end“的顺序。
grid-column: 是grid-column-end和grid-column-start的简写，定义一个网格子项横跨列的位置和范围。
grid-row: 是grid-row-end和grid-row-start的简写, 来定义一个网格子项横跨行的位置和范围。
justify-self: 设置单个项目在其所在网格区域内的水平对齐方式，可选值有start, end, center, stretch。
align-self: 设置单个项目在其所在网格区域内的垂直排列方式，可选值有start, end, center, stretch。

1. grid-column-start，grid-column-end，grid-row-start，grid-row-end

grid-column-start、grid-column-end、grid-row-start和grid-row-end属性是用来定义网格中的项目（Grid Items）的位置。它们指定了项目所在的区域开始和结束的水平或垂直线的编号，这个编号是相对于网格容器（Grid Container）的。

例如，你可以在一个3x2的grid布局中使用grid-column-start: 2;和grid-column-end: 4;来创建一个跨越第二列和第三列的宽度的项目。同样，你也可以使用grid-row-start: 1;和grid-row-end: 3;来创建一个跨越了第一行和第二行的高度的项目。

这样做会给这个项目提供两列和两行的空间来展示其内容。

以下是一个完整的示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
      
      
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: 10px;
        background-color: #2196f3;
        padding: 10px;
        width: 800px;
        height: 800px;

      }

      .item {
      
      
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3;
        background-color: rgba(255, 255, 255, 0.8);
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">I cover two rows and two columns</div>
    </div>
  </body>
</html>

效果如下：
在这里插入图片描述

我们可以打开控制台，让子项的线的编号显示出来，如下
在这里插入图片描述

2. grid-area，grid-column，grid-row

grid-area: 设置网格子项的行/列开始和结束位置，是前面四个属性的合并简写形式，按照"grid-row-start / grid-column-start / grid-row-end / grid-column-end“的顺序。
grid-column: 是grid-column-end和grid-column-start的简写，定义一个网格子项横跨列的位置和范围。
grid-row: 是grid-row-end和grid-row-start的简写, 来定义一个网格子项横跨行的位置和范围。

这三个属性其实就是前面介绍的四个属性的简写方式，如下分别使用简写方式实现和案例1同样的效果：

1. grid-area

核心改动：

  .item {
    
    
        /* grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3; */
        grid-area: 1 / 2 / 3 / 4; 
        background-color: rgba(255, 255, 255, 0.8);
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

2. grid-column，grid-row

核心改动：

.item {
    
    
        /* grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3; */
        grid-column: 4 / 2;
        grid-row: 3 / 1;
        /* grid-area: 1 / 2 / 3 / 4; */
        background-color: rgba(255, 255, 255, 0.8);
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

2. 完整示例代码及效果

完整示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
      
      
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: 10px;
        background-color: #2196f3;
        padding: 10px;
        width: 800px;
        height: 800px;
      }

      .item {
      
      
        /* grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 3; */
        grid-column: 4 / 2;
        grid-row: 3 / 1;
        /* grid-area: 1 / 2 / 3 / 4; */
        background-color: rgba(255, 255, 255, 0.8);
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">I cover two rows and two columns</div>
    </div>
  </body>
</html>

效果如下：

可以看到还是和案例1一样的效果。

3. justify-self, align-self

justify-self属性用于控制网格元素在所在列中的对齐方式，或者说水平对齐。它的取值可以是start（对齐列的起始位置）、end（对齐列的结束位置）、center（列的中心位置）或stretch（拉伸以填充整个列宽）。
align-self属性则是用于控制网格元素在所在行上的对齐方式，即垂直对齐。它有相同的取值设置：start（对齐行的起始位置）、end（对齐行的结束位置）、center（行的中心位置）或stretch（拉伸以填充整个行高）。

下面是一个完整的例子:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
      
      
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
        grid-gap: 10px;
        background-color: #2196f3;
        padding: 10px;
        width: 800px;
        height: 800px;
      }

      .item {
      
      
        justify-self: center;
        align-self: end;
        width: 50px;
        height: 50px;
        background-color: rgba(255, 255, 255, 0.8);
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>

    </div>
  </body>
</html>

在这里插入图片描述
在此示例中，每个项目都将在其单元格内部在水平方向上居中，并在垂直方向上与其单元格的底部对齐。

这样可能看着不是很明显，我们可以打开控制台查看：
在这里插入图片描述

四、常用的grid布局案例

1. 两边固定，中间自适应

在这里插入图片描述示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
      
      
            height:400px;
            background:skyblue;
            display: grid;
            /* grid-template-columns: 100px 1fr 100px; */
            grid-template-columns: 100px minmax(100px, 1fr) 100px;
            grid-template-rows: 100px;
            gap: 10px;
        }
        .main div{
      
      
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

2. 网格自适应

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
      
      
            background:skyblue;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            grid-template-rows: 100px;
            grid-auto-rows: 100px;
            grid-gap:20px 20px;
        }
        .main div{
      
      
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
    </div>
</body>
</html>

3. 叠加效果（定位）

猫咪图片链接
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
      
      
            width: 470px;
            height: 300px;
            background:skyblue;
            display: grid;
        }
        .main img{
      
      
            grid-area: 1/1/1/1;
        }
        .main span{
      
      
            grid-area: 1/1/1/1;
            justify-self: end;
            align-self: start;
            margin:5px;
            color: red;
        }
        .main p{
      
      
            grid-area: 1/1/1/1;
            align-self: end;
            margin:0;
            padding:0;
            background:rgba(0,0,0,0.5);
            height:30px;
            line-height: 30px;
            color:white;
        }
    </style>
</head>
<body>
    <div class="main">
        <img src="./cat.png" alt="">
        <span>自制</span>
        <p>可爱的小猫咪.....</p>
    </div>
</body>
</html>

4. 多组合排列布局

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
      
      
            width:300px;
            height:300px;
            background:skyblue;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            gap:5px;
        }
        .main div{
      
      
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .main div:nth-of-type(1){
      
      
            /* grid-area: 1/1/span 2/span 2; */
            grid-area: 2/1/span 2/span 2;
        }
    </style>
</head>
<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>
</html>

5. 栅格布局

在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .row{
      
      
            background:skyblue;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: 50px;
            grid-auto-rows: 50px;
        }
        .row div{
      
      
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            border:1px rgb(107, 102, 102) solid;
        }
        .row .col-1{
      
      
            grid-area: auto/auto/auto/span 1;
        }
        .row .col-2{
      
      
            grid-area: auto/auto/auto/span 2;
        }
        .row .col-3{
      
      
            grid-area: auto/auto/auto/span 3;
        }
        .row .col-4{
      
      
            grid-area: auto/auto/auto/span 4;
        }
        .row .col-5{
      
      
            grid-area: auto/auto/auto/span 5;
        }
        .row .col-6{
      
      
            grid-area: auto/auto/auto/span 6;
        }
        .row .col-7{
      
      
            grid-area: auto/auto/auto/span 7;
        }
        .row .col-8{
      
      
            grid-area: auto/auto/auto/span 8;
        }
        .row .col-9{
      
      
            grid-area: auto/auto/auto/span 9;
        }
        .row .col-10{
      
      
            grid-area: auto/auto/auto/span 10;
        }
        .row .col-11{
      
      
            grid-area: auto/auto/auto/span 11;
        }
        .row .col-12{
      
      
            grid-area: auto/auto/auto/span 12;
        }
    </style>
</head>
<body>
    <div class="row">
        <div class="col-6">1</div>
        <div class="col-3">2</div>
        <div class="col-4">3</div>
        <div class="col-5">4</div>
    </div>
</body>
</html>

6. 行的自适应

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
      
       
            width:300px;
            background:skyblue;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: 100px;
            gap:5px;
        }
        .main div{
      
      
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</html>

7. 列的自适应

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main{
      
       
            height:300px;
            background:skyblue;
            display: inline-grid;
            grid-template-rows: repeat(3, 1fr);
            grid-auto-flow: column;
            grid-auto-columns: 100px;
            gap:5px;
        }
        .main div{
      
      
           background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="main">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</html>

五、总结

总的来说，Grid网格布局是一个强大的CSS 工具，它不仅提供了更好、更直观的网页布局方式，而且提高了开发效率，简化了代码。通过本文，我们了解了Grid网格布局的基本原理，以及如何运用在实际的页面布局中。掌握了Grid网格布局，你就可以设计出更多种样式和布局的页面，从而提升用户体验。最后，我们要记住，不管使用什么样的布局工具，一直以用户为中心，设计出他们需要的、易于操作的网站将永远是我们的目标。

grid网格布局看这一篇就够了(接近3w字的总结)

一、什么是grid网格布局

二、grid容器常用属性

1. display:grid

2. grid-template-columns

1. auto

2.指定每一列的宽度

3.fr

4. repeat()

3. grid-template-rows

4. grid-template-areas和grid-area

5. grid-template

1. 定义行和列大小

2. 定义网格区域

3. 重构示例4

6. grid-gap、grid-column-gap、grid-row-gap

1. 网格间隙

2. 网格间隙简写

7.justify-items、align-items、place-items

8. justify-content、align-content、place-conten

9. grid-auto-columns、grid-auto-rows、grid-auto-flow

三、grid子项常用属性

1. grid-column-start，grid-column-end，grid-row-start，grid-row-end

2. grid-area，grid-column，grid-row

1. grid-area

2. grid-column，grid-row

2. 完整示例代码及效果

3. justify-self, align-self

四、常用的grid布局案例

1. 两边固定，中间自适应

2. 网格自适应

3. 叠加效果（定位）

4. 多组合排列布局

5. 栅格布局

6. 行的自适应

7. 列的自适应

五、总结

猜你喜欢