CSS Grid 布局学习笔记

1. 概述

CSS Grid 布局是一个强大的二维布局系统,它可以在网页上创建复杂的布局。Grid 布局允许你在水平和垂直方向上设计网页布局。

2. 基本概念

2.1 网格容器(Grid Container)

使用 display: grid;display: inline-grid; 将一个元素定义为网格容器。

css 复制代码
.grid-container {
  display: grid;
}

2.2 网格项(Grid Item)

网格容器的子元素自动成为网格项。

html 复制代码
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

3. 定义网格

3.1 网格轨道(Grid Tracks)

网格轨道包含网格列和网格行。使用 grid-template-columnsgrid-template-rows 定义网格轨道。

css 复制代码
.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* 定义三列,每列宽度为100px */
  grid-template-rows: 50px 50px; /* 定义两行,每行高度为50px */
}

3.2 网格线(Grid Lines)

网格线是网格轨道之间的分隔线。网格线从 1 开始编号。

3.3 网格区域(Grid Areas)

网格区域是由四个网格线围成的区域。使用 grid-template-areas 定义命名网格区域。

css 复制代码
.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px;
  grid-template-areas: 
    "header header header"
    "content content sidebar";
}
.grid-item.header { grid-area: header; }
.grid-item.content { grid-area: content; }
.grid-item.sidebar { grid-area: sidebar; }

4. 网格项的放置

4.1 使用行号和列号放置网格项

使用 grid-column-startgrid-column-endgrid-row-startgrid-row-end 放置网格项。

css 复制代码
.grid-item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

4.2 使用简写属性放置网格项

使用 grid-columngrid-row 简写属性。

css 复制代码
.grid-item {
  grid-column: 1 / 3; /* 从第1列开始,到第3列结束 */
  grid-row: 1 / 2; /* 从第1行开始,到第2行结束 */
}

4.3 使用命名网格区域放置网格项

使用 grid-area 属性放置命名网格区域的网格项。

css 复制代码
.grid-item {
  grid-area: header;
}

5. 网格间隙(Grid Gaps)

使用 grid-gapgrid-row-gapgrid-column-gap 定义网格项之间的间隙。

css 复制代码
.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px;
  grid-gap: 10px; /* 行间隙和列间隙都为10px */
  grid-row-gap: 15px; /* 行间隙为15px */
  grid-column-gap: 20px; /* 列间隙为20px */
}

6. 网格对齐

6.1 对齐网格容器

使用 justify-itemsalign-itemsplace-items 对齐网格容器内的网格项。

css 复制代码
.grid-container {
  display: grid;
  justify-items: center; /* 水平方向居中对齐 */
  align-items: center; /* 垂直方向居中对齐 */
  place-items: center; /* 水平和垂直方向居中对齐 */
}

6.2 对齐网格项

使用 justify-selfalign-selfplace-self 对齐单个网格项。

css 复制代码
.grid-item {
  justify-self: center; /* 水平方向居中对齐 */
  align-self: center; /* 垂直方向居中对齐 */
  place-self: center; /* 水平和垂直方向居中对齐 */
}

7. 示例代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Layout Example</title>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
    grid-template-areas: 
      "header header header"
      "content content sidebar";
    grid-gap: 10px;
  }
  .grid-item {
    background-color: #ccc;
    padding: 10px;
    border: 1px solid #000;
  }
  .header { grid-area: header; background-color: #f3c; }
  .content { grid-area: content; background-color: #fc3; }
  .sidebar { grid-area: sidebar; background-color: #3cf; }
</style>
</head>
<body>

<div class="grid-container">
  <div class="grid-item header">Header</div>
  <div class="grid-item content">Content</div>
  <div class="grid-item sidebar">Sidebar</div>
</div>

</body>
</html>

8. 参考文献

相关推荐
_Kayo_4 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
chenchihwen4 小时前
大模型应用班-第2课 DeepSeek使用与提示词工程课程重点 学习ollama 安装 用deepseek-r1:1.5b 分析PDF 内容
人工智能·学习
超浪的晨4 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发
使二颗心免于哀伤6 小时前
《设计模式之禅》笔记摘录 - 10.装饰模式
笔记·设计模式
悠哉悠哉愿意6 小时前
【电赛学习笔记】MaxiCAM 项目实践——与单片机的串口通信
笔记·python·单片机·嵌入式硬件·学习·视觉检测
快乐肚皮7 小时前
ZooKeeper学习专栏(五):Java客户端开发(原生API)详解
学习·zookeeper·java-zookeeper
慕y2747 小时前
Java学习第七十二部分——Zookeeper
java·学习·java-zookeeper
岩中竹7 小时前
广东省省考备考——常识:科技常识(持续更新)
笔记
涔溪7 小时前
响应式前端设计:CSS 自适应布局与字体大小的最佳实践
前端·css
★YUI★7 小时前
学习游戏制作记录(剑投掷技能)7.26
学习·游戏·unity·c#