CSS Grid实战-构建灵活高效的网格系统

🕗 发布于 2024-10-17 17:13 css 前端 flex gird css3

一、前言

首先抛出一个问题：比如我要实现一个布局，最外层元素的宽度是1000px，高度自适应。子元素宽度为300px，一行展示3个，从左到右排列。其中最左边与最右边的元素需要紧挨父元素的左右边框。如下图所示：
在这里插入图片描述

flex代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Items</title>
  <style>
    .box {
      width: 1000px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 10px;
    }

    .item {
      background: greenyellow;
      width: 300px;
      height: 150px;
    }
  </style>
</head>

<body>
  <div class="box">
    <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>
</body>


</html>

实现之后发现了问题，由于我们设置了双端对齐导致，当最后一行的个数不足三个时，页面展示的效果和我们预期的效果有出入。使用flex实现这个效果就要对这个问题进行额外的处理。

处理的方式有很多种，最常见的处理方式是在元素后面添加空元素，使其成为3的倍数即可。其实这里添加空元素的个数没有限制，因为空元素不会展示到页面上，即使添加100个空元素用户也是感知不到的。但是如果我们直接使用Gird布局呢：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Items</title>
  <style>
    .box {
      display: grid;
      grid-template-columns: repeat(3, 300px);
      justify-content: space-between;
      gap: 10px;
      width: 1000px;
    }

    .item {
      background: greenyellow;
      height: 150px;
    }
  </style>


</head>

<body>
  <div class="box">
    <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>
</body>


</html>

问题就迎刃而解了。

二、Grid简介

CSS网格布局是一个二维的基于网格的布局系统，其目的在于完全改变我们设计基于网络的用户界面的方式。CSS一直用来布局我们的网页，但是他从来没有做过很好的工作，最开始我们使用表格，然后float，position和inline-block。但是这些本质上是css的hack，并且遗漏了很多重要的功能(例如垂直居中)，后来flexbox出现了，但是他的目的只是为了更简单的一维布局，而不是复杂的二维布局。

Grid（网格）布局是CSS中一种现代化的布局方法，旨在提供一种强大而灵活的方式来设计二维网格结构，即同时控制行和列。Grid布局是由W3C定义的CSS Grid Layout Module的一部分，它允许Web开发者创建复杂的网格结构，这些结构可以在不同屏幕尺寸和设备类型之间保持一致的布局表现。

Grid布局的历史

Grid布局的概念最早出现在2009年，但直到2017年左右才开始被大多数现代浏览器广泛支持。它的设计目的是为了克服传统的基于浮动和定位布局的限制，特别是在创建复杂的多列布局时。

Grid布局的基本组成部分

Grid布局由三个基本部分组成：

Grid Container（网格容器）：定义为grid或inline-grid的直接父元素。
Grid Items（网格项）：直接放置在网格容器内的子元素。
Grid Lines（网格线）：由grid容器边缘和任何显式网格轨道之间形成的线条。

Grid布局的关键特性

显式网格与隐式网格：显式网格允许开发者精确指定行和列的数量及大小，而隐式网格则是在显式网格的基础上，自动添加额外的行或列以容纳超出显式网格范围的内容。
Grid Areas（网格区域）：允许定义跨越多个单元格的区域，便于创建复杂的布局。
重复与模板区域：简化了网格轨道和区域的定义，允许使用模式化的语法来重复行或列。
对齐与定位：提供了多种对齐方式，包括justify-self, align-self, justify-items, 和 align-items等，用于控制网格项在其所在的行和列中的对齐方式。

网格容器
在元素中应用display: grid。这是所有网格布局的直接父元素, 在这个例子中div是网格容器：

/* HTML */
<div>
    <p>First Item</p>
    <p>Second Item</p>
    <p>Third Item</p>
</div>

/* CSS */
div {
  display: grid;
}

网格项目
网格容器的小孩(例如直接子元素),这里的item元素是网格项目,但sub-item不是：

/* HTML */
<div class="container">
  <div class="item"></div>
  <div class="item">
    <div class="sub-item"></div>
  </div>
  <div class="item"></div>
</div>

/* CSS */
.container {
  display: grid;
}

网格线
构成网格结构的分界线, 他们既可以是垂直的(列)也可以是水平的(行)。这里的黄线是一个列网格线的例子
在这里插入图片描述
网格轨道
两个相邻网格线之间的空间。你可以把它们想象成网格的列或行。这是第二行和第三行网格线之间的网格轨道

网格单元格
两个相邻的行和两个相邻的列网格线之间的空间,也就是网格中的一个单元,这是行网格线1和2之间的网格单元, 以及列网格线2和3
在这里插入图片描述
网格空间
四个网格线包围的总空间,网格空间可以由任意数量的网格单元组成。这里是行网格线1和3之间的网格空间, 以及列网格线1和3

在这里插入图片描述

三、CSS 网格容器属性

3.1 display

display： grid - 将 HTML 元素转换为网格容器。
将元素定义为网格容器, 并未其内容建立新的网格格式上下文

值：
- gird: 生成块级网格
- inline-grid: 生成内联网格
- subgrid: 如果你的网格容本身是一个网格项目(即嵌套网格), 你可以使用这个属性来表明你想继承他父母的行/列而不是他自己的。

.container{
  display: grid | inline-grid | subgrid
}

3.2 grid-template-columns

grid-template-columns - 定义列的大小和数量。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Container</title>
  <style>
    div.container {
      display: grid;

      /* creates a three columns of size 100px, 200px, 100px respectively */
      grid-template-columns: 100px 200px 100px;

      width: 400px;
      border: 2px solid black;
      background-color: orange;
      padding: 12px;
    }

    /* styles all grid items */
    div.item {
      border: 1px solid black;
      background-color: greenyellow;
      text-align: center;
      padding: 10px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container">
    <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>
</body>

</html>

在这里插入图片描述

3.3 grid-template-rows

grid-template-rows - 定义行的大小和数量。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Container</title>
  <style>
    div.container {
      display: grid;
      grid-template-columns: 100px 200px 100px;

      /* sets three rows of size 100px, 60px, and 80px respectively */
      grid-template-rows: 100px 60px 80px;

      width: 400px;
      border: 2px solid black;
      background-color: orange;
      padding: 12px;
    }

    /* styles all grid items */
    div.item {
      border: 1px solid black;
      background-color: greenyellow;
      text-align: center;
      padding: 10px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container">
    <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>
</body>

</html>

在这里插入图片描述

3.4 grid

grid 是一个简写属性，用于在单个声明中指定 grid-template-rows 和 grid-template-columns 属性。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Container</title>
  <style>
    div.container {
      display: grid;

      /* grid-template-rows / grid-template-columns */
      grid: 50px 100px / 1fr 1fr 2fr;

      width: 400px;
      gap: 12px;
      border: 2px solid black;
      background-color: orange;
      padding: 12px;
    }

    /* styles all grid items */
    div.item {
      width: 100%;
      border: 1px solid black;
      background-color: greenyellow;
      font-weight: bold;
    }
  </style>>
</head>

<body>
  <div class="container">
    <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>
</body>

</html>

在这里插入图片描述

3.5 (Fr) Unit

小数单位（fr）将网格容器中的可用空间划分为多个分数。它以灵活和动态的方式在列或行之间分配网格容器中的可用空间。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Container</title>
  <style>
    div.container {
      display: grid;

      /* column-1, column-2, column-3 */
      grid-template-columns: 1fr 2fr 1fr;

      /* row-1, row-2, row-3 */
      grid-template-rows: 1fr 1fr 2fr;

      width: 400px;
      border: 2px solid black;
      background-color: orange;
      padding: 12px;
    }

    /* styles all grid items */
    div.item {
      border: 1px solid black;
      background-color: greenyellow;
      text-align: center;
      padding: 10px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container">
    <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>
</body>

</html>

在这里插入图片描述

3.6 minmax（）

minmax（）函数定义网格轨道的最小和最大大小，即行或列大小。minmax（）函数接受 2 个参数：min-size：第一个是轨道的最小大小。max-size：第二个是最大大小。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Container</title>
  <style>
    div.container {
      display: grid;

      /* column-1, column-2, column-3 */
      grid-template-columns: minmax(auto, 80%) 1fr 3em;

      /* row-1, row-2, row-3 */
      grid-template-rows: 1fr 1fr 3fr;

      width: 400px;
      border: 2px solid black;
      background-color: orange;
      padding: 12px;
    }

    /* styles all grid items */
    div.item {
      border: 1px solid black;
      background-color: greenyellow;
      text-align: center;
      padding: 10px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container">
    <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">
      The first column track has a minimum size of auto. This means
      that the minimum size it will take is to fit the content. Its
      maximum size of 50% will prevent it from getting wider than 50%
      of the grid container width.
    </div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
</body>

</html>

在这里插入图片描述

应用：响应式布局。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Items</title>
  <style>
    .box {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      justify-content: space-between;
      gap: 10px;
    }

    .item {
      background: greenyellow;
      height: 100px;
    }
  </style>



</head>

<body>
  <div class="box">
    <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>
</body>


</html>

在这里插入图片描述

3.7 repeat()

repeat（）函数定义重复的网格轨道。这对于具有相同大小项目的网格非常有用。repeat（）表示法接受两个参数：Number of tracks：第一个表示定义的轨道应重复的次数；track size：第二个是 track size。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Container</title>
  <style>
    div.container {
      display: grid;

      /* creates 3 columns of 100px each */
      grid-template-columns: repeat(3, 100px);

      /* creates 3 rows of equal fraction */
      grid-template-rows: repeat(3, 1fr);

      width: 400px;
      border: 2px solid black;
      background-color: orange;
      padding: 12px;
    }

    /* styles all grid items */
    div.item {
      border: 1px solid black;
      background-color: greenyellow;
      text-align: center;
      padding: 10px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container">
    <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>
</body>

</html>

在这里插入图片描述

3.8 grid-template-areas

grid-template-areas - 定义可以放置网格项的命名网格区域。双引号内的每一行都表示网格中的一行.每个区域名称对应一个命名的网格区域，它们之间用空格分隔.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Container</title>
  <style>
    div.container {
      display: grid;

      /* defines the columns */
      grid-template-columns: 1fr 3fr 1fr;

      /* defines the rows */
      grid-template-rows: 40px 100px 40px;

      /* defines the grid areas placing the grid items */
      grid-template-areas:
        "header header header"
        "sidebar1 main sidebar2"
        "footer footer footer";

      border: 2px solid black;
      text-align: center;
    }

    header {
      /* places the header within the header grid area */
      grid-area: header;
      background-color: skyblue;
    }

    aside.left {
      /* places left sidebar within the sidebar1 grid area */
      grid-area: sidebar1;
    }

    aside.right {
      /* places right sidebar within the sidebar2 grid area */
      grid-area: sidebar2;
    }

    main {
      /* places the main content within the main grid area */
      grid-area: main;
      background-color: greenyellow;
    }

    footer {
      /*places the footer in the footer grid area*/
      grid-area: footer;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div class="container">
    <header>HEADER</header>
    <aside class="left">SIDEBAR 1</aside>
    <aside class="right">SIDEBAR 2</aside>
    <main>MAIN SECTION</main>
    <footer>FOOTER</footer>
  </div>
</body>

</html>

在这里插入图片描述
应用：后台管理布局。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Items</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 250px 1fr;
      grid-template-rows: 100px 1fr 100px;
      grid-template-areas:
        'header header'
        'aside  main'
        'aside footer';
      height: 100vh;
    }

    .header {
      grid-area: header;
      background: #b3c0d1;
    }

    .aside {
      grid-area: aside;
      background: #d3dce6;
    }

    .main {
      grid-area: main;
      background: #e9eef3;
    }

    .footer {
      grid-area: footer;
      background: #b3c0d1;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="aside">Aside</div>
    <div class="main">Main</div>
    <div class="footer">Footer</div>
  </div>
</body>

</html>

在这里插入图片描述

3.9 grid-template

grid-template - 定义一个属性的行、列和区域的简写。
创建一个网格容器，其中包含三行，分别为 50px、150px 和 50px，以及三列网格容器宽度相等的分数。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Container</title>
  <style>
    div.container {
      display: grid;

      /* grid-template-rows / grid-template-columns */
      grid-template: 50px 150px 50px / 1fr 1fr 1fr;

      width: 400px;
      border: 2px solid black;
      background-color: orange;
      padding: 12px;
    }

    /* styles all grid items */
    div.item {
      border: 1px solid black;
      background-color: greenyellow;
      text-align: center;
      padding: 10px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container">
    <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>
</body>

</html>

在这里插入图片描述

3.10 grid-column-gap

grid-column-gap - 定义列之间的间隙。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Container</title>
  <style>
    div.container {
      display: grid;

      /* defines 3 rows of 80px each */
      grid-template-rows: repeat(3, 80px);

      /* defines 3 columns of equal fraction */
      grid-template-columns: repeat(3, 1fr);

      /* creates a column gap of 20px */
      grid-column-gap: 20px;

      width: 400px;
      border: 2px solid black;
      background-color: orange;
    }

    /* styles all grid items */
    div.item {
      border: 1px solid black;
      background-color: greenyellow;
      text-align: center;
      padding: 30px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container">
    <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>
</body>

</html>

在这里插入图片描述

3.11 grid-row-gap

grid-row-gap - 定义行之间的间隙。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Container</title>
  <style>
    div.container {
      display: grid;

      /* defines three rows of 80px each */
      grid-template-rows: repeat(3, 80px);

      /* defines three columns of equal fraction */
      grid-template-columns: repeat(3, 1fr);

      /* creates a  row gap of 20px */
      grid-row-gap: 20px;

      width: 400px;
      border: 2px solid black;
      background-color: orange;
    }

    /* styles all grid items */
    div.item {
      border: 1px solid black;
      background-color: greenyellow;
      text-align: center;
      padding: 30px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container">
    <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>
</body>

</html>

在这里插入代码片

3.12 grid-gap

grid-gap - 定义行和列间隙的简写。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Container</title>
  <style>
    div.container {
      display: grid;

      /* defines three rows of 80px each */
      grid-template-rows: repeat(3, 80px);

      /* defines three columns of equal fraction */
      grid-template-columns: repeat(3, 1fr);

      /* creates a  row and column gap of 20px */
      grid-gap: 20px;

      width: 400px;
      border: 2px solid black;
      background-color: orange;
    }

    /* styles all grid items */
    div.item {
      border: 1px solid black;
      background-color: greenyellow;
      text-align: center;
      padding: 30px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container">
    <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>
</body>

</html>

在这里插入图片描述

3.13 justify-content

justify-content - 沿水平轴对齐网格。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Container</title>
  <style>
    div.container {
      display: grid;

      /* defines rows and columns */
      grid-template-rows: repeat(2, 80px);
      grid-template-columns: repeat(3, 40px);

      /* aligns the entire grid to center in the grid container*/
      justify-content: center;

      width: 400px;
      gap: 12px;
      border: 2px solid black;
      background-color: orange;
    }

    /* styles all grid items */
    div.item {
      text-align: center;
      border: 1px solid black;
      background-color: greenyellow;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container">
    <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>
</body>

</html>

在这里插入图片描述

3.14 align-content

align-content - 沿垂直轴对齐网格。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Container</title>
  <style>
    div.container {
      display: grid;
      height: 180px;

      /* defines rows and columns */
      grid-template-rows: repeat(2, 30px);
      grid-template-columns: repeat(3, 80px);

      /* aligns the grid vertically to center of grid container */
      align-content: center;

      width: 400px;
      gap: 12px;
      border: 2px solid black;
      background-color: orange;
    }

    /* styles all grid items */
    div.item {
      text-align: center;
      border: 1px solid black;
      background-color: greenyellow;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container">
    <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>
</body>

</html>

在这里插入图片描述

3.15 place-content

place-content - 水平和垂直对齐内容的简写。第一个值设置 align-content，第二个值设置 justify-content。如果省略第二个值，则第一个值将分配给这两个属性。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Container</title>
  <style>
    div.container {
      display: grid;
      width: 400px;
      height: 180px;

      /* defines rows and columns */
      grid-template-rows: repeat(2, 30px);
      grid-template-columns: repeat(3, 80px);

      /* sets align-content to center and justify-content to end of grid container*/
      place-content: center end;

      column-gap: 20px;
      border: 2px solid black;
      background-color: orange;
    }

    /* styles all grid items */
    div.item {
      text-align: center;
      border: 1px solid black;
      background-color: greenyellow;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container">
    <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>
</body>

</html>

在这里插入图片描述

3.13 justify-items**

justify-items - 在项的网格单元格内水平对齐项。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Container</title>
  <style>
    div.container {
      display: grid;

      /* defines rows and columns */
      grid-template-rows: repeat(2, 80px);
      grid-template-columns: repeat(3, 1fr);

      /* aligns the grid items at the end of grid cells */
      justify-items: end;

      width: 400px;
      gap: 12px;
      border: 2px solid black;
      background-color: orange;
      padding: 12px;
    }

    /* styles all grid items */
    div.item {
      width: 20px;
      border: 1px solid black;
      background-color: greenyellow;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container">
    <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>
</body>

</html>

在这里插入图片描述

3.14 align-items

align-items - 在项的网格单元格内垂直对齐项。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Container</title>
  <style>
    div.container {
      display: grid;

      /* defines rows and columns */
      grid-template-rows: repeat(2, 80px);
      grid-template-columns: repeat(3, 1fr);

      /* aligns the grid items at the bottom of grid cells */
      align-items: end;

      width: 400px;
      gap: 12px;
      border: 2px solid black;
      background-color: orange;
      padding: 12px;
    }

    /* styles all grid items */
    div.item {
      border: 1px solid black;
      background-color: greenyellow;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container">
    <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>
</body>

</html>

在这里插入图片描述

3.14 place-items

place-items - 水平和垂直对齐项目的简写。第一个值设置 align-items，第二个值设置 justify-items 属性。如果省略第二个值，则为这两个属性设置第一个值。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Container</title>
  <style>
    div.container {
      display: grid;

      /* defines rows and columns */
      grid-template-rows: repeat(2, 80px);
      grid-template-columns: repeat(3, 1fr);

      /* sets align-items and justify-items to the center of grid cell */
      place-items: center;

      width: 400px;
      gap: 12px;
      border: 2px solid black;
      background-color: orange;
      padding: 12px;
    }

    /* styles all grid items */
    div.item {
      width: 40px;
      border: 1px solid black;
      background-color: greenyellow;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="container">
    <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>
</body>

</html>

在这里插入图片描述

四、CSS 网格项目属性

grid-column-start：定义起始列行号
grid-column-end：定义结束列行号
grid-row-start：定义起始行行号
grid-row-end：定义结束行行号

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Items</title>
  <style>
    div.container {
      /* sets the element as a grid container */
      display: grid;

      /* defines the grid of 3 rows and three columns */
      grid-template: 100px 100px 50px / 100px 150px 100px;

      width: 550px;
      border: 2px solid black;
      background-color: orange;
      padding: 12px;
    }

    /* styles all grid items */
    div.item {
      border: 1px solid black;
      background-color: greenyellow;
      text-align: center;
      padding: 5px;
      font-weight: bold;
    }

    /* places the first grid item */
    div.item-1 {
      grid-row-start: 1;
      grid-row-end: 3;
      background-color: purple;
    }

    /* places the second grid item */
    div.item-2 {
      grid-column-start: 2;
      grid-column-end: 4;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
  </div>
</body>

</html>

在这里插入图片描述

grid-row 和 grid-column 是指定网格线号的简写属性。
grid-row：定义 grid-row-start 和 grid-row-end 属性
grid-column：定义 grid-column-start 和 grid-column-end 属性

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Items</title>
  <style>
    div.container {
      /* sets the element as a grid container */
      display: grid;

      /* defines the grid of 3 rows and three columns */
      grid-template: 100px 100px 50px / 100px 150px 100px;

      width: 550px;
      border: 2px solid black;
      background-color: orange;
      padding: 12px;
    }

    /* styles all grid items */
    div.item {
      border: 1px solid black;
      background-color: greenyellow;
      text-align: center;
      padding: 5px;
      font-weight: bold;
    }

    /* places the first grid item */
    div.item-1 {
      grid-row: 1/4;
      background-color: purple;
    }

    /* places the second grid item */
    div.item-2 {
      grid-column: 2/4;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
  </div>
</body>

</html>

在这里插入图片描述

span
关键字用于按指定数字扩展行和列。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Items</title>
  <style>
    div.container {
      /* sets the element as a grid container */
      display: grid;

      /* defines the grid of 3 rows and three columns */
      grid-template: 100px 100px 50px / 100px 150px 100px;

      width: 550px;
      border: 2px solid black;
      background-color: orange;
      padding: 12px;
    }

    /* styles all grid items */
    div.item {
      border: 1px solid black;
      background-color: greenyellow;
      text-align: center;
      padding: 5px;
      font-weight: bold;
    }

    /* places the first grid item */
    div.item-1 {
      grid-column: 1 / span 3;
      background-color: purple;
    }
  </style>
</head>

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

</html>

在这里插入图片描述
grid-area
grid-area 属性指定单个声明中 grid 项的行和列位置。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Items</title>
  <style>
    div.container {
      /* sets the element as a grid container */
      display: grid;

      /* defines the grid of 3 rows and three columns */
      grid-template: 100px 100px 50px / 100px 150px 100px;

      width: 550px;
      border: 2px solid black;
      background-color: orange;
      padding: 12px;
    }

    /* styles all grid items */
    div.item {
      border: 1px solid black;
      background-color: greenyellow;
      text-align: center;
      padding: 5px;
      font-weight: bold;
    }

    /* places the first grid item */
    div.item-1 {
      grid-area: 1 / 1 / 3/ 3;
      background-color: purple;
    }
  </style>
</head>

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

</html>

在这里插入图片描述
justify-self
justify-self 属性用于控制网格项在其网格单元内的水平对齐方式。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Items</title>
  <style>
    div.container {
      /* sets the element as a grid container */
      display: grid;

      /* defines the grid of 2 rows and three columns */
      grid-template: 100px 100px / 100px 150px 100px;

      width: 550px;
      border: 2px solid black;
      background-color: orange;
      padding: 12px;
    }

    /* styles all grid items */
    div.item {
      border: 1px solid black;
      background-color: greenyellow;
      text-align: center;
      padding: 5px;
      font-weight: bold;
    }

    /* aligns the content to the end of grid cell */
    div.item-1 {
      justify-self: end;
      background-color: purple;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
  </div>
</body>

</html>

在这里插入图片描述
align-self
align-self 属性用于控制网格项在其网格单元内的垂直对齐方式。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Items</title>
  <style>
    div.container {
      /* sets the element as a grid container */
      display: grid;

      /* defines the grid of 2 rows and three columns */
      grid-template: 100px 100px / 100px 150px 100px;

      width: 550px;
      border: 2px solid black;
      background-color: orange;
      padding: 12px;
    }

    /* styles all grid items */
    div.item {
      border: 1px solid black;
      background-color: greenyellow;
      text-align: center;
      padding: 5px;
      font-weight: bold;
    }

    /* aligns the content to the end of grid cell */
    div.item-1 {
      align-self: end;
      background-color: purple;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
  </div>
</body>

</html>

在这里插入图片描述
place-self
place-self 属性是一个简写属性，用于在单个声明中指定 justify-self 和 align-self 属性。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>CSS Grid Items</title>
  <style>
    div.container {
      /* sets the element as a grid container */
      display: grid;

      /* defines the grid of 2 rows and three columns */
      grid-template: 100px 100px / 100px 150px 100px;

      width: 550px;
      border: 2px solid black;
      background-color: orange;
      padding: 12px;
    }

    /* styles all grid items */
    div.item {
      border: 1px solid black;
      background-color: greenyellow;
      text-align: center;
      padding: 5px;
      font-weight: bold;
    }

    /* aligns the content to the end of grid cell */
    div.item-1 {
      place-self: center center;
      background-color: purple;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
  </div>
</body>

</html>

在这里插入图片描述

五、总结

在 caniuse 中，我们可以看到的结果如下，总体兼容性还不错，但在 IE 10 以下不支持。个人建议在公司的内部系统运用起来是没有问题的，但 TOC 的话，可能目前还是不太合适。
在这里插入图片描述

使用场景
Grid布局非常适合于创建复杂的响应式布局，尤其是在需要同时管理垂直和水平空间的应用场合。例如：

新闻网站主页，通常包含多个内容区块。
电子商务网站的产品展示页面，需要整齐排列的商品列表。
复杂的仪表板设计，其中包含各种大小不同的数据可视化组件。

结论
Grid布局为Web设计师和开发者提供了一种全新的工具箱，使得创建复杂而灵活的布局变得更加简单。结合Flexbox，两者可以共同解决Web设计中几乎所有的布局需求，从而推动Web设计进入一个更加成熟和多样化的时代。

原文地址：https://blog.csdn.net/ASHIYI66/article/details/141604748

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：低代码用户中心的构建：技术论坛探讨
下一篇：【K8S系列】Kubernetes pod节点Pending或CrashLoopBackOff 问题及解决方案详解【已解决】

leetcode289:生命游戏
根据，简称为，是英国数学家约翰·何顿·康威在 1970 年发明的细胞自动机。给定一个包含m × n个格子的面板，每一个格子都可以看成是一个细胞。每个细胞都具有一个初始状态：1即为（live），或0即为
阅读更多2024-10-20
MongoDB数据恢复
注意：两个MongoDB的版本要一致，本文使用的是mongo:4.2.24。先把K8S上面的MongoDB 容器停止（可以把副本改成0）。1、将容器挂载MongoDB的数据目录备份到本地。经常是数据文
阅读更多2024-10-20
C#中实现事务
C#中实现事务
阅读更多2024-10-20
【LeetCode每日一题】——560.和为 K 的子数组
给你一个整数数组 nums 和一个整数 k ，请你统计并返回该数组中和为 k 的子数组的个数。子数组是数组中元素的连续非空序列。
阅读更多2024-10-20
「漏洞复现」满客宝智慧食堂系统 selectUserByOrgId 未授权访问漏洞
请勿利用文章内的相关技术从事非法测试，由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失，均由使用者本人负责，作者不为此承担任何责任。工具来自网络，安全性自测，如有侵权请联系删除。本次
阅读更多2024-10-20
React面试题目（从基本到高级）
React前端面试常见题目涵盖了React的基础概念、组件、状态管理、生命周期、性能优化等多个方面。
阅读更多2024-10-20
12.个人博客系统（Java项目基于spring和vue）
1 在校学习的学生，可用于日常学习使用或是毕业设计使用 2 毕业一到两年的开发人员，用于锻炼自己的独立功能模块设计能力，增强代码编写能力。 3 亦可以部署为商化项目使用。 4 需要完整资料及源码
阅读更多2024-10-20
YoloV8改进策略：注意力改进|DeBiFormer，可变形双级路由注意力|引入DeBiLevelRoutingAttention注意力模块（全网首发）
本次改进的核心在于将DeBiLevelRoutingAttention模块嵌入到YoloV8的主干网络中，具体位置是在SPPF（Spatial Pyramid Pooling Fast）模块之后。这一
阅读更多2024-10-20
word取消自动单词首字母大写
情况说明：在word输入单词后首字母会自动变成大写取消单词首字母大写步骤：（1）点击菜单栏文件（2）点击“更多”——>“选项”（3）点击“校对”——>“自动更正选项”（4）取消“句首字母大
阅读更多2024-10-20
web前端网页用户注册页面
【代码】web前端网页用户注册页面。
阅读更多2024-10-20

CSS Grid实战-构建灵活高效的网格系统

CSS Grid实战-构建灵活高效的网格系统

一、前言

二、Grid简介

三、CSS 网格容器属性

3.1 display

3.2 grid-template-columns

3.3 grid-template-rows

3.4 grid

3.5 (Fr) Unit

3.6 minmax（）

3.7 repeat()

3.8 grid-template-areas

3.9 grid-template

3.10 grid-column-gap

3.11 grid-row-gap

3.12 grid-gap

3.13 justify-content

3.14 align-content

3.15 place-content

3.13 justify-items**

3.14 align-items

3.14 place-items

四、CSS 网格项目属性

五、总结

相关文章