三十的博客

从零开始学习 Grid 布局

本文内容基于 AI 生成结果整理，可能包含不准确信息，仅供参考使用。
发布时间
最后更新
阅读量 加载中...

Grid 介绍

Grid（网格）布局是 CSS 中最强大的布局系统，它是一个二维布局系统（可以同时处理行和列），而 Flexbox 是一维布局系统（一次只能处理行或列）。

MDN Grid 文档 | CSS Grid Garden - 游戏化学习 Grid | Grid by Example - 大量示例

基础概念

网格容器

css 
.container {
  display: grid; /* 或 display: inline-grid */
}

设置这个属性的元素就变成了网格容器，它的直接子元素会自动成为网格项目。

网格线

网格线是构成网格结构的分界线，包括水平线和垂直线。

网格轨道

两个相邻网格线之间的空间，包括行轨道和列轨道。

网格单元格

网格单元格是网格中的最小单位，由四条网格线包围。

网格区域

网格区域是由一个或多个网格单元格组成的矩形区域。

基本用法

定义网格

css 
.container {
  display: grid;
  grid-template-columns: 100px 200px 100px; /* 3列，宽度分别为100px,200px,100px */
  grid-template-rows: 50px 100px; /* 2行，高度分别为50px,100px */
}

常用单位

css 
.container {
  grid-template-columns: 1fr 2fr 1fr; /* 中间列是两侧的两倍宽 */
}

实战示例

基本网格

html 
<div class="grid-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>
css 
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3等宽列 */
  gap: 10px; /* 网格间距 */
}

.item {
  background-color: #4caf50;
  padding: 20px;
  text-align: center;
  color: white;
}

响应式网格

css 
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

网格项目定位

基于线的定位

css 
.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;

  /* 简写 */
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

grid-column: 1 / span 2;

表示从第 1 条网格线开始，跨越 2 个单元格，效果与 grid-column: 1 / 3 相同。

基于区域的定位

css 
.container {
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.footer {
  grid-area: footer;
}

对齐方式

可以通过 F12 审查示例了解具体作用。

容器内对齐

控制元素在容器内的对齐方式。

语法：

css 
.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
  place-items: <align-items> <justify-items>; /* 简写 */
}

示例：

此演示仅在桌面端浏览器中可用

示例代码：

html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>wanglei.live</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        justify-items: center;
        align-items: center;

        width: 300px;
        height: 300px;
        margin: 10px auto;
      }

      .item {
        background-color: pink;
        width: 50px;
        height: 50px;
      }
    </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>

整个内容区域对齐

控制容器的布局方式。

语法：

css 
.container {
  justify-content: start | end | center | stretch | space-around | space-between
    | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between |
    space-evenly;
}

示例：

此演示仅在桌面端浏览器中可用

示例代码：

html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>wanglei.live</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .container {
        display: grid;
        grid-template-columns: repeat(3, 80px);
        grid-template-rows: repeat(3, 50px);
        align-content: space-around;
        justify-content: space-around;

        width: 300px;
        height: 200px;
        margin: 10px auto;
      }

      .item {
        background-color: pink;
      }
    </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>

auto-fit vs auto-fill

在子元素不能够铺满一行时，它俩才会出现差异。

auto-fill 会自动填充尽可能多的列，即使有空间也不会调整列数。

此演示仅在桌面端浏览器中可用

css 
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

auto-fit 会自动调整列数，填充剩余空间。

此演示仅在桌面端浏览器中可用

css 
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
#Grid #网页布局 #Css基础