CSS Grid 布局：属性及使用详解

今天也要暴富2024-12-19 20:37

CSS Grid 布局：属性及使用详解

  • [一、CSS Grid 布局的基础概念](#一、CSS Grid 布局的基础概念)
  • [二、主要的 CSS Grid 属性](#二、主要的 CSS Grid 属性)
    • [1、`display: grid` / `display: inline-grid`声明 Grid 容器](#1、display: grid / display: inline-grid声明 Grid 容器)
    • [2、`grid-template-columns` / `grid-template-rows`Grid 容器中列和行的尺寸](#2、grid-template-columns / grid-template-rowsGrid 容器中列和行的尺寸)
    • [3、 `grid-template-areas`命名布局区域](#3、 grid-template-areas命名布局区域)
    • [4、`gap`/ `grid-gap` 设置网格项之间的间距](#4、gap/ grid-gap 设置网格项之间的间距)
    • [5、`grid-column` / `grid-row`：控制元素在 Grid 中的定位](#5、grid-column / grid-row：控制元素在 Grid 中的定位)
    • [6、 `justify-items` / `align-items`：控制Grid项的对齐](#6、 justify-items / align-items：控制Grid项的对齐)
    • [7、`justify-content` / `align-content`控制整个 Grid 容器的对齐](#7、justify-content / align-content控制整个 Grid 容器的对齐)
  • [三、常见的 Grid 布局设计](#三、常见的 Grid 布局设计)
    • [1、简单的 2 列布局](#1、简单的 2 列布局)
    • [2、 定制化的页面布局](#2、 定制化的页面布局)
  • 四、总结

CSS Grid 布局是一个强大的二维布局系统，它使得网页开发中的布局工作更加简洁和高效。Grid 布局可以同时处理水平和垂直方向的排列，允许开发者轻松地设计复杂的网页布局。

一、CSS Grid 布局的基础概念

Grid 布局由两部分组成：

  1. Grid 容器（Grid Container） ：通过给元素设置 display: grid 或 display: inline-grid 来创建一个 Grid 容器。所有直接子元素将成为 Grid 项目。
  2. Grid 项目（Grid Items）：Grid 容器内的直接子元素。

二、主要的 CSS Grid 属性

1、display: grid / display: inline-grid声明 Grid 容器

  • 作用 ：用于声明一个元素为 Grid 容器，display: grid 会让元素成为块级 Grid 容器，display: inline-grid 会让元素成为内联 Grid 容器。
  • 使用方法：
css 复制代码 
.container {
  display: grid;
}

2、grid-template-columns / grid-template-rowsGrid 容器中列和行的尺寸

  • 作用 ：定义 Grid 容器中列和行的尺寸。
    • grid-template-columns 设置列的宽度。
    • grid-template-rows 设置行的高度。
  • 语法 ：你可以指定多个尺寸，使用空格分开，或者使用 repeat() 函数来简化代码。
    示例：
css 复制代码 
.container {
  display: grid;
  grid-template-columns: 200px 1fr 100px;
  /* 200px：第一列宽度为 200px,1fr：第二列的宽度占剩余空间,100px：第三列宽度为 100px。 */
  grid-template-rows: 50px auto;
  /* 50px：第一行高度为 50px,auto：第二行的高度由内容决定。 */
}

效果：

3、 grid-template-areas命名布局区域

  • 作用 ：使用名称化的布局，将 Grid 项目放置在命名的区域内。
    • 通过命名区域来控制 Grid 项目的位置。
    • 每个区域可以由多个行或列组成，但必须由名称指定。
    • 这种方法可以让布局更直观、易于维护，也能让 HTML 和 CSS 之间的关系更加明确。
  • 语法 ： grid-template-areas 是一个由多个字符串组成的属性，每个字符串代表 一行。而在每个字符串中，空格分隔的每个部分代表 一列，这些部分的顺序决定了每个区域在 Grid 容器中的位置。

    • 结构： 区域名称可以是你自定义的字符串，它们将用于对应的 grid-area 属性来定位元素。

      css 复制代码 
      grid-template-areas: 
    "区域1 区域2 区域3"
    "区域4 区域5 区域6"
    "区域7 区域8 区域9";

    • 在子元素样式中添加grid-area 属性来定位元素

示例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Layout Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>Header</header>
        <main>Main Content</main>
        <aside>Sidebar</aside>
        <footer>Footer</footer>
    </div>
</body>
</html>
css 复制代码 
/* 创建 Grid 容器 */
.container {
    display: grid;
    grid-template-columns: 1fr 3fr; /* 两列布局，第一列占 1fr，第二列占 3fr */
    grid-template-rows: auto 1fr auto; /* 三行布局，第一行和第三行自适应高度，第二行占满剩余空间 */
    grid-template-areas: 
        "header header"      /* header 跨越两列 */
        "sidebar main"       /* sidebar 在第一列，main 在第二列 */
        "footer footer";     /* footer 跨越两列 */
    gap: 20px; /* 设置行间距和列间距 */
}

/* 分配每个区域的元素 */
header {
    grid-area: header;
    background-color: #f8f8f8;
    padding: 20px;
    text-align: center;
}

main {
    grid-area: main;
    background-color: #e0e0e0;
    padding: 20px;
}

aside {
    grid-area: sidebar;
    background-color: #d0d0d0;
    padding: 20px;
}

footer {
    grid-area: footer;
    background-color: #b0b0b0;
    padding: 20px;
    text-align: center;
}

效果：

4、gap/ grid-gap 设置网格项之间的间距

gap（现在的标准）和grid-gap（在较老的浏览器中使用）属性用于设置网格（Grid）项之间的间距。它们可以单独设置行间距（行与行之间的距离）和列间距（列与列之间的距离），也可以同时设置行间距和列间距。

  • 作用：定义 Grid 项目之间的间距，可以同时设置行间距和列间距，或者单独设置。

  • 语法 ：

    css 复制代码 
    gap: <row-gap> <column-gap>;
    • <row-gap>：设置行间距（行与行之间的间距）。
    • <column-gap>：设置列间距（列与列之间的间距）。
    • 如果只设置一个值，则 row-gap 和 column-gap 都使用该值。

注意事项：

  • gap 属性适用于 Grid 布局 和 Flex 布局，所以它不仅能控制 Grid 容器项之间的间距，也适用于 Flex 容器中的项。
  • 在较老的浏览器中，gap 可能不被支持（例如 Internet Explorer），但现代浏览器都已经广泛支持该属性。

5、grid-column / grid-row：控制元素在 Grid 中的定位

  • 作用 ：控制 Grid 项目在行和列上的位置和跨度。

    • grid-column 用于定义一个元素在 水平（列） 方向上的起始和结束位置。它指定了元素从哪个列开始，跨越多少列。它是一个简写属性，将 grid-column-start 和 grid-column-end 结合在一起
    • grid-row 用于定义一个元素在 垂直（行） 方向上的起始和结束位置。它指定了元素从哪一行开始，跨越多少行。同样是一个简写属性，它将 grid-row-start 和 grid-row-end 结合在一起

  • 语法 ：

    css 复制代码 
    grid-column: <start-line> / <end-line>;
grid-row: <start-line> / <end-line>;

实例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout Example</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 50px 50px 50px;
      gap: 10px;
    }

    .item1 {
      grid-column: 1 / 2;  /* 从第1列开始，到第2列结束 */
      grid-row: 1 / 2;     /* 从第1行开始，到第2行结束 */
      background-color: lightblue;
    }

    .item2 {
      grid-column: 2 / 4;  /* 从第2列开始，到第4列结束 */
      grid-row: 1 / 3;     /* 从第1行开始，到第3行结束 */
      background-color: lightcoral;
    }

    .item3 {
      grid-column: 1 / 2;  /* 从第1列开始，到第2列结束 */
      grid-row: 3 / 4;     /* 从第3行开始，到第4行结束 */
      background-color: lightgreen;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>
</body>
</html>

效果：

6、 justify-items / align-items：控制Grid项的对齐

在 CSS Grid 布局中，justify-items 和 align-items 是两个重要的对齐属性，用于控制网格项在主轴和交叉轴上的对齐方式。

  • 作用：控制 Grid 项目在 Grid 单元格中的对齐方式。

    • justify-items：控制项目在水平轴上的对齐，它影响的是每个网格项相对于其所在单元格的对齐方式，而不是整个Grid 容器本身的对齐方式。
    • align-items：控制项目在垂直轴上的对齐，同样，它影响的是每个网格项相对于其所在单元格的对齐方式。

  • 语法：

    css 复制代码 
    justify-items: <alignment>;
  /* 
   start：网格项对齐到网格单元格的开始边缘 
   end：网格项对齐到网格单元格的结束边缘
   center 网格项在网格单元格中居中对齐
   stretch 网格项拉伸填满整个网格单元格（这是默认值）
 */
align-items: <alignment>;
/* 
   start：网格项对齐到网格单元格的顶部边缘 
   end：网格项对齐到网格单元格的底部边缘
   center 网格项在网格单元格中垂直居中对齐
   stretch 网格项拉伸填满整个网格单元格（这是默认值）
 */

示例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout Example</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      justify-items: center;  /* 水平居中对齐每个网格项 */
      align-items: center;    /* 垂直居中对齐每个网格项 */
      gap: 10px;              /* 网格项之间的间距 */
    }

    .item {
      background-color: lightgreen;
      padding: 20px;
    }
  </style>
</head>
<body>

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

</body>
</html>

效果：

注意事项 ：与 justify-content 和 align-content 的区别
justify-items 和 align-items 是用于对齐网格项在各自单元格中的位置。而 justify-content 和 align-content 是用于对齐整个 Grid 容器中的内容。

7、justify-content / align-content控制整个 Grid 容器的对齐

  • 作用：控制整个 Grid 容器内的项目如何在容器中对齐。

    • justify-content：控制整个 Grid 容器中网格项在水平方向（主轴）上的对齐方式。这个属性影响的是整个容器的网格内容，而不是单个网格项。
    • align-content：控制整个 Grid 容器中网格项在垂直方向（交叉轴）上的对齐方式。同样也只影响整个容器的网格内容。

  • 语法：

    css 复制代码 
    justify-items: <alignment>;
  /* 
	start：将网格内容对齐到容器的起始边缘
	end：将网格内容对齐到容器的结束边缘
    center 将网格内容水平居中对齐
	stretch 将网格内容拉伸以填充整个容器（默认值）
	space-between 在网格项之间平均分配空白，首尾项紧贴容器边缘
	space-around 在网格项之间平均分配空白，网格项两侧都有相等的空间
	space-evenly 在网格项之间平均分配空白，每个网格项之间的间距都相等
  */
align-items: <alignment>;
  /* 
    start：将网格内容对齐到容器的顶部
	end：将网格内容对齐到容器的底部
    center 将网格内容垂直居中对齐
	stretch 将网格内容拉伸以填充整个容器（默认值）
	space-between 在网格项之间平均分配垂直空白，首尾项紧贴容器的顶部和底部
    space-around 在网格项之间平均分配垂直空白，网格项的上下都有相等的空间
    space-evenly 在网格项之间平均分配垂直空白，每个网格项之间的间距都相等
 */

  • 使用场景：

    • 当网格项的总宽度或高度小于容器的宽度或高度时，justify-content 和 align-content 可以用来控制整个网格内容在容器中的对齐位置。
    • 在有间距的情况下，它们可以用于控制网格项之间的空隙分配和对齐。

示例：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout Example</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 100px 100px 100px;
      grid-template-rows: 100px 100px 100px;
      justify-content: center;  /* 水平居中对齐整个网格 */
      align-content: center;    /* 垂直居中对齐整个网格 */
      gap: 10px;                /* 网格项之间的间距 */
      height: 500px;            /* 设置容器高度 */
    }

    .item {
      background-color: lightcoral;
      padding: 10px;
    }
  </style>
</head>
<body>

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

</body>
</html>

效果：

三、常见的 Grid 布局设计

1、简单的 2 列布局

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout Example</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 3fr 1fr;
      grid-gap: 20px;
      height: 500px;
    }

    .main {
      background-color: aqua
    }

    .sidebar {
      background-color: blueviolet
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="main">Main content</div>
    <div class="sidebar">Sidebar</div>
  </div>

</body>
</html>

效果：

2、 定制化的页面布局

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout Example</title>
  <style>
    .container {
      display: grid;
      height: 300px;
      grid-template-columns: 1fr 3fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
    }

    header {
      grid-area: header;
      background-color: aqua
    }

    main {
      grid-area: main;
      background-color: cornflowerblue
    }

    aside {
      grid-area: sidebar;
      background-color: chocolate
    }

    footer {
      grid-area: footer;
      background-color: darkkhaki
    }
  </style>
</head>

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

</body>
</html>

效果：

四、总结

CSS Grid 布局是现代网页设计中的重要工具，它允许开发者创建复杂的布局结构，且不需要借助浮动或复杂的定位技巧。Grid 布局的核心在于将页面区域分成"行"和"列"，并通过指定项的跨度与位置来控制布局。理解 CSS Grid 的基础概念和属性是掌握这一布局方法的第一步。

相关推荐
Catherinemin27 分钟前
CSS|08 浮动&清除浮动
前端·css
kaoa00030 分钟前
Linux入门攻坚——42、Nginx及web站点架构模式
linux·前端·nginx
赵大仁1 小时前
在M系列芯片的Mac上使用Uniapp开发的依赖安装指南
前端·windows·macos·ios·小程序·uni-app·安卓
Beekeeper&&P...2 小时前
AddressBookController
java·前端·网络
前端熊猫3 小时前
组件十大传值
前端·javascript·vue.js
oumae-kumiko3 小时前
【JS/TS鼠标气泡跟随】文本提示 / 操作提示
前端·javascript·typescript
YG·玉方3 小时前
键盘常见键的keyCode和对应的键名
前端·javascript·计算机外设
梦屿千寻！！3 小时前
Axios和Ajax的区别
前端
iOS开发的小学生3 小时前
鸿蒙app封装 axios post请求失败问题
前端·harmonyos·鸿蒙开发
热门推荐
01【机器学习】探索机器学习在旅游业的革新之旅02玄机平台应急响应—webshell查杀03(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明04SQL 主从数据库实时备份05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07【华东南AWDP】第十七届全国大学生信息安全竞赛 CISCN 2024 创新实践能力赛区域赛 部分题解WP08WPS-0DAY-20230809的分析和利用复现09PyTorch机器学习实现液态神经网络10校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站