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

已于 2023-07-28 18:59:29 修改
阅读量644 收藏 8
点赞数 2
分类专栏： 前端常用布局和注意事项 文章标签： 前端 css grid布局 自适应 多行多列
于 2023-07-28 18:54:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jieyucx/article/details/131972879
版权

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

一、什么是grid网格布局

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

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

  1. 创建复杂的网格：利用Grid布局可以轻松地创建多行多列的网格，从而实现更复杂的页面布局。

  2. 响应式设计：Grid布局可以适应不同屏幕大小和设备类型，从而实现响应式设计。

  3. 自定义对齐：Grid布局允许开发人员自定义对齐方式，包括水平对齐、垂直对齐和对角线对齐。

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

  1. 亚马逊的电子书阅读器Kindle的官方网站使用了Grid布局，将各种相关产品排列在网格中，同时给人留下清晰、易于查找的印象。
    https://www.amazon.cn/b?node=1536596071
    在这里插入图片描述

  2. 时尚杂志《Vogue》的网站使用了Grid布局，并将网页元素放置在不同的网格单元中。该网站的布局简洁明了，让阅读体验更为舒适和顺畅。
    https://www.vogue.com.cn/
    在这里插入图片描述

二、grid容器常用属性

在这里插入图片描述

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

  1. display：定义该元素为网格容器

  2. grid-template-columns：定义网格布局中各列的宽度、间距等信息

  3. grid-template-rows：定义网格布局中各行的高度、间距等信息

  4. grid-template-areas：定义网格布局中各区域的位置和名称

  5. grid-template：同时定义网格布局中各列、各行和各区域的大小和位置信息

  6. grid-column-gap/grid-row-gap：定义网格布局中各列之间/各行之间的间距大小

  7. grid-gap：同时定义网格布局中各列和各行之间的间距大小

  8. justify-items：定义网格容器中所有网格项在水平方向上的对齐方式

  9. align-items：定义网格容器中所有网格项在垂直方向上的对齐方式

  10. justify-content：定义网格容器中所有网格项在水平方向上的对齐方式

  11. align-content：定义网格容器中所有网格项在垂直方向上的对齐方式

  12. grid-auto-columns：定义没有显式指定宽度的网格列的大小

  13. grid-auto-rows：定义没有显式指定高度的网格行的大小

  14. grid-auto-flow：定义网格布局自动生成网格项的顺序

  15. grid：简写属性，同时定义网格模板、列和行的大小，以及行列之间的间距

  16. 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这三个属性被用来创建网格之间的间隙。

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

  2. grid-column-gap：设置列之间的间隙。例如，grid-column-gap: 10px; 这表示列间隔是10px。

  3. 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 布局中的网格间隙。

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

  2. column-gap：该属性用于设置列间距。例如，column-gap: 15px; 会将列间距设置为 15px。

  3. 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，它们主要用来设置网格中子项目的对齐方式。

  1. justify-items：这个属性用来控制网格中子项目在行轴（行轴水平）上的对齐方式。例如 justify-items: start 就会把子项目向行轴开头对齐。

  2. align-items：这个属性用来控制子项目在列轴（列轴是垂直的）上的对齐方式。例如 align-items: end 就会把所有项目向列轴的尾部对齐。

  3. 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布局中主要涉及到网格中内容的对齐方式，也就是整体网格的对齐方式，这些属性生效的前提是网格的宽度小于容器的宽度。

  1. justify-content：用于确定行轴上的对齐方式。如果网格的宽度小于容器的宽度，这个属性就会生效。比如：
.container {
    display: grid;
    justify-content: start; // 使得所有的网格项都在行轴的起始位置开始排列
}
  1. align-content：用于确定列轴上的对齐方式。如果网格的高度小于容器的高度，这个属性就会生效。比如：
.container {
    display: grid;
    align-content: end; // 使得所有的网格项都在列轴的结束位置开始排列
}
  1. 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子项常用属性

在这里插入图片描述

  1. grid-column-start: 指定格子的开始位置。
  2. grid-column-end: 指定格子的结束位置。
  3. grid-row-start: 指定行的开始位置。
  4. grid-row-end: 指定行的结束位置。
  5. grid-area: 设置网格子项的行/列开始和结束位置，是前面四个属性的合并简写形式，按照"grid-row-start / grid-column-start / grid-row-end / grid-column-end“的顺序。
  6. grid-column: 是grid-column-end和grid-column-start的简写，定义一个网格子项横跨列的位置和范围。
  7. grid-row: 是grid-row-end和grid-row-start的简写, 来定义一个网格子项横跨行的位置和范围。
  8. justify-self: 设置单个项目在其所在网格区域内的水平对齐方式，可选值有start, end, center, stretch。
  9. 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网格布局，你就可以设计出更多种样式和布局的页面，从而提升用户体验。最后，我们要记住，不管使用什么样的布局工具，一直以用户为中心，设计出他们需要的、易于操作的网站将永远是我们的目标。

jieyucx
关注
专栏目录
Matplot pyplot绘制单图，多子图不同样式详解，这一篇就够了
qq_40985985的博客
08-13 2335
matplotlib.pyplot 是使 matplotlib 像 MATLAB 一样工作的函数集合。这篇博客将介绍 1. 单图单线 2. 单图多线不同样式（红色圆圈、蓝色实线、绿色三角等） 3. 使用关键字字符串绘图(data 可指定依赖值为：numpy.recarray 或 pandas.DataFrame） 4. 使用分类变量绘图（绘制条形图、散点图、折线图） 5. 多子表多轴及共享轴 6. 多子表（水平堆叠、垂直堆叠、水平垂直堆叠、水平垂直堆叠共享轴、水平垂直堆叠去掉子图中间的冗余xy
【白嫖党】如何把前端学好？看完这篇，直呼：太强了！（历经半个月之作）
超逸の学习技术博客
04-04 2万+
很少有文章做到将知识形成一个体系，于是需要翻阅很多资料，但这篇文章做到了！共34815字数。
10.介绍一下CSS中的Grid网格布局?
kleinBlue.的博客
11-07 837
一、是什么 Grid布局即网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列 擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系 这与之前讲到的flex一维布局不相同 设置display:grid/inline-grid的元素就是网格布局容器，这样就能出发浏览器渲染引擎的网格布局算法 <divclass="container"> <divclass="itemitem-1"> ...
grid网格布局
qq_60893085的博客
02-13 3018
display:gride
前端页面布局之【Grid布局】详解
最新发布
cnzzs的博客
08-16 1632
目录????前言????浏览器支持????Gird简介和基本概念????属性介绍???? 父元素上的属性???? 设置grid布局????设置网格的列数与行数????通过网格单元的名字来布局 grid-template-areas????设置网格轨道的大小????justify-items????align-items????justify-content????align-content????grid...
grid布局
weixin_30698297的博客
06-01 132
经历过表格布局，浮动布局，flex布局。网页布局是越来越方便，下面讲的是grid布局，一些基本的grid基础知识 《1》网格布局的相关基本概念 1.容器和项目 容器：采用网格布局的区域 项目：容器内部采用网格定位的子元素 <div class="box"> <div class="item"&gt...
网格布局 Grid
青蛙king的博客
12-16 1万+
grid 布局将网页划分成一个个网格，可以任意组合不同的网格成“行和列”，可以定义这些网格的大小、位置、层次等关系，从而实现各种各样的布局。Grid 布局远比 Flex 布局强大。
安卓开发入门基础之gridview网格布局+webview
01-20
本篇将主要介绍如何在安卓应用中使用`GridView`实现网格布局以及结合`WebView`进行网页展示。首先，我们来看一下`GridView`的基本概念。 `GridView`是Android SDK提供的一种控件，它允许你将数据以网格的形式展示...
女朋友要我教她CSS，我就写了这一篇长文，感动哭了？
超逸の学习技术博客
05-30 9686
女朋友她又要我教她CSS，这4w字长文够了吗？她会被感动到吗？
从零开始学Python爬虫系列3.1.1：爬取后的数据展示。Matplotlib.pyplot基础，只画一个曲线？看这一篇就够了
冰冻的寒风
06-28 456
（一）一个线图的创建 1.给出数据 import numpy as np x=np.arange(0,12.1,0.2) y=np.sin(x) 2.画出图形，你只需要plt.plot(x,y) import matplotlib.pyplot as plt plt.plot(x,y) 这里的y不是必须的。 这时候，你只得到下面这样的图形 这样的图形太单调了，我喜欢五彩缤纷的灰 plt.plot(x,y,color='red',linestyle='-',linewidth=3,mar
Grid布局详解-看这篇就够了
qq_46372132的博客
08-29 3827
Grid布局详解-看这篇就够了,比flex布局更强大的grid网格布局
【布局】 Grid网格布局
m0_57135756的博客
04-07 1690
Grid布局 CSS Grid 网格布局介绍 CSS Grid 布局是 Web 的第一个真正的布局系统。它的目的是将内容组织成行列的形式，最终使开发人员能高度控制我们眼前屏幕上页面的显示效果。CSS Grid 布局不仅仅可以使复杂的布局和精美的排版成为可能，而且还可以使其变的干净利落可维护。 基础知识和浏览器支持 ​ 截至2022年3月，大部分浏览器都提供了对 CSS Grid 的原生支持，而且无需加浏览器前缀：Chrome（包括 Android ），Firefox，Edge，Safari（包括iOS）和
Grid网格布局
weixin_44543519的博客
05-17 655
作者：李嘉乐 本次任务完成时间：2019年5月9日～2019年5月17日 开发工具与关键技术： VS2015、WPF 在XAML中有五个布局元素分别是：Grid、 DockPanel 、StackPanel、 WrapPanel 、Canvas，每个布局元素都有着自己的特点，现在我分享的是Grid布局。Grid 布局又叫网格布局。它是通过自定义行和列，并通过行列的数量、行高列宽来调整控件的布局元素...
一文搞懂Grid 布局
热门推荐
pz1021的博客
09-29 4万+
Grid 布局是什么？ Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址 Grid 布局和 flex 布局 讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jieyucx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值