Go...

神州猎狐网游活动站

首页

当前位置：首页>>副本攻略

深入解读 CSS Grid 网格布局：现代网页布局的终极指南（适合新手与高级开发者）

admin 2026-01-17 15:51:59 3689

深入解读 CSS Grid 网格布局：现代网页布局的终极指南（适合新手与高级开发者）

有勇气的牛排

1644

前端

2024-10-21 21:28:51

新鲜臭牛粪,送兄弟送闺蜜送老板,保密发货,种花种菜有机肥料绿色无污染

农家玉米,用的放心,卖家自用玉米,自产自销

AI编程交流deepseek

进群口令：博客

1 前言

CSS Grid 布局是一种强大而灵活的布局系统，可以让开发者通过简单的 CSS 规则轻松创建复杂的网页布局。

1.1 设备支持支持时间点

Google Chrome: 从 2017 年的版本 57 开始全面支持。

Firefox: 从 2017 年的版本 52 开始支持。

Safari: 从 2017 年的版本 10.1 开始支持。

Microsoft Edge: 从 2017 年的版本 16 开始支持。

Internet Explorer: 仅 IE 11 部分支持，且需要使用旧版语法。

移动端浏览器（如 Chrome for Android、Safari for iOS）也在 2017 年后开始支持。

微信小程序：微信小程序自 2018 年的更新起，已经支持了 display: grid 布局。根据其官方开发文档，绝大多数的现代设备和微信版本都支持这一特性，因此你可以在大部分微信小程序中安全使用 grid 布局。

支付宝小程序：支付宝小程序同样支持 display: grid 布局。不过，某些特定情况下，例如使用 grid 组件嵌套 grid 时，可能会遇到问题，尤其是在 slot 插入组件时。这种情况下可能会导致父子组件之间的关系失效，从而导致布局出错

1.2 容器布局属性（应用于 Grid 容器）

这些属性定义网格的布局方式：

display: grid | inline-grid：将一个容器定义为网格容器。

grid-template-columns：定义网格的列数和每列的宽度。

grid-template-rows：定义网格的行数和每行的高度。

grid-template-areas：通过命名区域定义布局。

grid-column-gap / grid-row-gap / gap：设置行列之间的间距。

grid-auto-columns：为自动生成的列定义宽度。

grid-auto-rows：为自动生成的行定义高度。

grid-auto-flow：控制自动布局项的填充顺序。

justify-items：设置网格项在网格单元中的水平对齐方式。

align-items：设置网格项在网格单元中的垂直对齐方式。

justify-content：控制整个网格容器在其容器中的水平对齐方式。

align-content：控制整个网格容器在其容器中的垂直对齐方式。

1.3 内部元素属性（应用于 Grid 项目）

这些属性定义每个网格项在网格中的行为：

grid-column-start / grid-column-end：定义项目在列的起始位置和结束位置。

grid-row-start / grid-row-end：定义项目在行的起始位置和结束位置。

grid-area：指定网格项的命名区域，或者用来定义该项在网格中的位置。

justify-self：设置单个网格项在单元格中的水平对齐方式。

align-self：设置单个网格项在单元格中的垂直对齐方式。

place-self：同时设置 align-self 和 justify-self。

2 容器布局属性

2.1 display

display: grid; /* 构建块级元素 */

display: inline-grid; /* 构建行内元素 */

Title

有勇气的牛排

2.2 grid-templage-rows 行高与 grid-template-columns 列属性

定义网格容器中的列布局，即每一列的宽度和数量（按顺序定义每一列的大小）。

语法： grid-template-columns: ...;

track-size: 指每个列的宽度，可以是：像素px、百分比%、可用空间份额fr、auto。

2.2.1 行高 px指定

1 高80px

2 高50px

2.2.2 行高 px与repeat

1 重复50px

2 重复50px

3 重复50px

4 指定100px

2.2.3 列空间份额 fr

2.2.4 列 repeat

grid-template-columns: repeat(3, 1fr);

2.2.5 列 auto-fill 关键字

通常与 repeat() 函数一起使用，可以在创建网格时自动填充尽可能多的列，并根据容器的可用空间动态调整列的数量，从而实现响应式的布局。

语法：grid-template-columns: repeat(auto-fill, );

/* 每列宽150px，自动填充尽可能多的列 */

grid-template-columns: repeat(auto-fill, 150px);

2.2.6 列 minmax() 函数

定义最小、嘴大尺寸，适用于响应式，不至于元素过大或过小。

grid-template-columns: repeat(3, minmax(100px, 200px));

2.2.7 列 auto 关键字

.grid-container {

display: grid;

grid-template-rows: repeat(10, 50px);

grid-template-columns: 100px auto 100px;

gap: 10px;

}

2.3 网格间距

grid-row-gap 行间距

grid-column-gap：列间距

grid-row-gap: 10px;

grid-column-gap: 20px;

等同于

grid-gap: 10px 20px;

2.4 grid-auto-flow 属性(自动排列)

grid-auto-flow 属性是 CSS Grid布局中的一个属性，用于控制自动放置网格项的顺序和方式。当创建一个网格布局时，有时网格项并不明确放置在特定的网格单元中，grid-auto-flow 就巨鼎了这些未明确指定位置的网格项如何被自动排列。

语法：grid-auto-flow: row | column | dense | row dense | column dense;

row: 默认值，未指定位置的网格项将按行的顺序（从左到右，从上到下）自动放置。

columu: 未指定位置的，从上到下，从左到右。

dense: 启用“紧密填充”，会尝试在先前的空白位置放置网格项，避免空格。

row dense: 按行顺序自动放置，但会尝试紧密填充空白区域。

column dense: 按行顺序自动防止，但会尝试紧密填充空白区域。

2.4.1 按行填充

2.4.2 紧密填充 dense

.grid-container {

display: grid;

/* 三列布局 */

grid-template-columns: repeat(3, 100px);

/* 每行高度为 100px */

grid-auto-rows: 100px;

gap: 10px;

grid-auto-flow: dense;

}

2.5 justify-items 、align-items 、 place-items 属性

2.5.1 justify-items

start: 对齐单元格的起始边缘。

end: 对齐单元格的结束边缘。

centet: 单元格内部中间。

stretch: 拉伸，沾满单元格的整个宽度（默认值）。

Title

justify-items: start;

justify-items: end;

justify-items: center;

justify-items: stretch;

2.5.2 align-content

与justify-items同理，方向为垂直方向。

3 内部元素属性

3.1 grid-area 定义区域

3.1.1 固定布局

如果单元没有内容，则用点号代替。

有勇气的牛排语义化的 Grid 布局示例

有勇气的牛排博客

文章标题 1

这是文章 1 的内容。语义化标签使页面更具结构性和可读性。

2.1.2 响应式布局

有勇氣的牛排創作：

https://www.couragesteak.com/article/487

响应式 Grid 布局示例

有勇气的牛排博客

文章标题 1

这是文章 1 的内容。语义化标签使页面更具结构性和可读性。

文章标题 2

这是文章 2 的内容。使用语义化标签能够提高 SEO 排名。

4 案例

4.1 基础案例

有勇气的牛排 CSS Grid宫格示例

有勇气的牛排

1 前言

CSS Grid 布局是一种强大而灵活的布局系统，可以让开发者通过简单的 CSS 规则轻松创建复杂的网页布局。

1.1 设备支持支持时间点

Google Chrome: 从 2017 年的版本 57 开始全面支持。

Firefox: 从 2017 年的版本 52 开始支持。

Safari: 从 2017 年的版本 10.1 开始支持。

Microsoft Edge: 从 2017 年的版本 16 开始支持。

Internet Explorer: 仅 IE 11 部分支持，且需要使用旧版语法。

移动端浏览器（如 Chrome for Android、Safari for iOS）也在 2017 年后开始支持。

微信小程序：微信小程序自 2018 年的更新起，已经支持了 display: grid 布局。根据其官方开发文档，绝大多数的现代设备和微信版本都支持这一特性，因此你可以在大部分微信小程序中安全使用 grid 布局。

支付宝小程序：支付宝小程序同样支持 display: grid 布局。不过，某些特定情况下，例如使用 grid 组件嵌套 grid 时，可能会遇到问题，尤其是在 slot 插入组件时。这种情况下可能会导致父子组件之间的关系失效，从而导致布局出错

1.2 容器布局属性（应用于 Grid 容器）

这些属性定义网格的布局方式：

display: grid | inline-grid：将一个容器定义为网格容器。

grid-template-columns：定义网格的列数和每列的宽度。

grid-template-rows：定义网格的行数和每行的高度。

grid-template-areas：通过命名区域定义布局。

grid-column-gap / grid-row-gap / gap：设置行列之间的间距。

grid-auto-columns：为自动生成的列定义宽度。

grid-auto-rows：为自动生成的行定义高度。

grid-auto-flow：控制自动布局项的填充顺序。

justify-items：设置网格项在网格单元中的水平对齐方式。

align-items：设置网格项在网格单元中的垂直对齐方式。

justify-content：控制整个网格容器在其容器中的水平对齐方式。

align-content：控制整个网格容器在其容器中的垂直对齐方式。

1.3 内部元素属性（应用于 Grid 项目）

这些属性定义每个网格项在网格中的行为：

grid-column-start / grid-column-end：定义项目在列的起始位置和结束位置。

grid-row-start / grid-row-end：定义项目在行的起始位置和结束位置。

grid-area：指定网格项的命名区域，或者用来定义该项在网格中的位置。

justify-self：设置单个网格项在单元格中的水平对齐方式。

align-self：设置单个网格项在单元格中的垂直对齐方式。

place-self：同时设置 align-self 和 justify-self。

2 容器布局属性

2.1 display

display: grid; /* 构建块级元素 */
display: inline-grid; /* 构建行内元素 */

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
:root {
--grid-gap: 10px; /* 网格间距 */
--grid-item-height: 50px; /* 网格项高度 */
--bg-color: #9900FF; /* 背景色 */
--text-color: white; /* 字体颜色 */
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.grid-container {
display: grid;
gap: 5px; /* 设置网格之间的间距 */
}
.grid-item {
height: 30px;
background-color: var(--bg-color);
border-radius: 10px;
/* 内容、文字样式 */
display: flex;
justify-content: center;
align-items: center;
color: var(--text-color);
font-size: 20px;
}
</style>
</head>
<body>
<h1><center>有勇气的牛排</center></h1> <!-- 添加标题以提高可读性 -->
<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>
</body>
</html>

2.2 grid-templage-rows 行高与 grid-template-columns 列属性

定义网格容器中的列布局，即每一列的宽度和数量（按顺序定义每一列的大小）。

语法： grid-template-columns: <track-size> <track-size> ...;

track-size: 指每个列的宽度，可以是：像素px、百分比%、可用空间份额fr、auto。

2.2.1 行高 px指定

<style>
.grid-container {
display: grid;
grid-template-rows: 80px 50px auto;
gap: 10px;
}
.grid-item {
background-color: var(--bg-color);
border-radius: 10px;
/* 内容、文字样式 */
display: flex;
justify-content: center;
align-items: center;
color: var(--text-color);
font-size: 20px;
}
</style>
<div class="grid-container">
<div class="grid-item">1 高80px</div>
<div class="grid-item">2 高50px</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>

2.2.2 行高 px与repeat

<style>
.grid-container {
display: grid;
grid-template-rows: repeat(3, 50px) 100px;
gap: 10px;
}
.grid-item {
background-color: var(--bg-color);
border-radius: 10px;
/* 内容、文字样式 */
display: flex;
justify-content: center;
align-items: center;
color: var(--text-color);
font-size: 20px;
}
</style>
<div class="grid-container">
<div class="grid-item">1 重复50px</div>
<div class="grid-item">2 重复50px</div>
<div class="grid-item">3 重复50px</div>
<div class="grid-item">4 指定100px</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
</div>

2.2.3 列空间份额 fr

<style>
.grid-container {
display: grid;
/* 指定行高 */
grid-template-rows: repeat(10, 50px);
/* 指定列 两列，第一列占1/3，第二列占2/3 */
grid-template-columns: 1fr 2fr;
gap: 10px;
}
</style>
<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>

2.2.4 列 repeat

grid-template-columns: repeat(3, 1fr);

2.2.5 列 auto-fill 关键字

通常与 repeat() 函数一起使用，可以在创建网格时自动填充尽可能多的列，并根据容器的可用空间动态调整列的数量，从而实现响应式的布局。

语法：grid-template-columns: repeat(auto-fill, <track-size>);

/* 每列宽150px，自动填充尽可能多的列 */
grid-template-columns: repeat(auto-fill, 150px);

2.2.6 列 minmax() 函数

定义最小、嘴大尺寸，适用于响应式，不至于元素过大或过小。

grid-template-columns: repeat(3, minmax(100px, 200px));

2.2.7 列 auto 关键字

.grid-container {
display: grid;
grid-template-rows: repeat(10, 50px);
grid-template-columns: 100px auto 100px;
gap: 10px;
}

2.3 网格间距

grid-row-gap 行间距

grid-column-gap：列间距

grid-row-gap: 10px;
grid-column-gap: 20px;

等同于

grid-gap: 10px 20px;

2.4 grid-auto-flow 属性(自动排列)

语法：grid-auto-flow: row | column | dense | row dense | column dense;

row: 默认值，未指定位置的网格项将按行的顺序（从左到右，从上到下）自动放置。
columu: 未指定位置的，从上到下，从左到右。
dense: 启用“紧密填充”，会尝试在先前的空白位置放置网格项，避免空格。
row dense: 按行顺序自动放置，但会尝试紧密填充空白区域。
column dense: 按行顺序自动防止，但会尝试紧密填充空白区域。

2.4.1 按行填充

<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px); /* 三列布局 */
grid-auto-rows: 100px; /* 每行高度为 100px */
gap: 10px;
/* 默认按行填充 */
grid-auto-flow: row;
}
.grid-item {
background-color: var(--bg-color);
border-radius: 10px;
/* 内容、文字样式 */
display: flex;
justify-content: center;
align-items: center;
color: var(--text-color);
font-size: 20px;
}
</style>
<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>

2.4.2 紧密填充 dense

.grid-container {
display: grid;
/* 三列布局 */
grid-template-columns: repeat(3, 100px);
/* 每行高度为 100px */
grid-auto-rows: 100px;
gap: 10px;
grid-auto-flow: dense;
}
<div class="grid-container">
<div class="grid-item" style="grid-column: 1 / 3;">1</div>
<div class="grid-item">2</div>
<div class="grid-item" style="grid-column: 1 / 3;">33</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>

2.5 justify-items 、align-items 、 place-items 属性

2.5.1 justify-items

start: 对齐单元格的起始边缘。

end: 对齐单元格的结束边缘。

centet: 单元格内部中间。

stretch: 拉伸，沾满单元格的整个宽度（默认值）。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.grid-container, .grid-container2, .grid-container3, .grid-container4 {
display: grid;
grid-template-columns: 100px 200px 100px;
grid-gap: 5px;
grid-auto-rows: 50px;
justify-items: start;
border: 1px solid blue;
margin-bottom: 10px;
font-size: 20px;
}
.grid-container2 {
justify-items: end;
}
.grid-container3 {
justify-items: center;
}
.grid-container4 {
justify-items: stretch;
}
p {
font-size: 20px;
font-weight: 800;
}
</style>
</head>
<body>
<p>justify-items: start;</p>
<div class="grid-container">
<div class="grid-item" style="background-color: #66FFCC">1</div>
<div class="grid-item" style="background-color: #990000">2</div>
<div class="grid-item" style="background-color: #9900FF">3</div>
<div class="grid-item" style="background-color: #996633">4</div>
<div class="grid-item" style="background-color: #9966CC">5</div>
<div class="grid-item" style="background-color: #99FF00">6</div>
<div class="grid-item" style="background-color: #CC0099">7</div>
<div class="grid-item" style="background-color: #CC6600">8</div>
<div class="grid-item" style="background-color: #FF00FF">9</div>
</div>
<p>justify-items: end;</p>
<div class="grid-container2">
<div class="grid-item" style="background-color: #66FFCC">1</div>
<div class="grid-item" style="background-color: #990000">2</div>
<div class="grid-item" style="background-color: #9900FF">3</div>
<div class="grid-item" style="background-color: #996633">4</div>
<div class="grid-item" style="background-color: #9966CC">5</div>
<div class="grid-item" style="background-color: #99FF00">6</div>
<div class="grid-item" style="background-color: #CC0099">7</div>
<div class="grid-item" style="background-color: #CC6600">8</div>
<div class="grid-item" style="background-color: #FF00FF">9</div>
</div>
<p>justify-items: center;</p>
<div class="grid-container3">
<div class="grid-item" style="background-color: #66FFCC">1</div>
<div class="grid-item" style="background-color: #990000">2</div>
<div class="grid-item" style="background-color: #9900FF">3</div>
<div class="grid-item" style="background-color: #996633">4</div>
<div class="grid-item" style="background-color: #9966CC">5</div>
<div class="grid-item" style="background-color: #99FF00">6</div>
<div class="grid-item" style="background-color: #CC0099">7</div>
<div class="grid-item" style="background-color: #CC6600">8</div>
<div class="grid-item" style="background-color: #FF00FF">9</div>
</div>
<p>justify-items: stretch;</p>
<div class="grid-container4">
<div class="grid-item" style="background-color: #66FFCC">1</div>
<div class="grid-item" style="background-color: #990000">2</div>
<div class="grid-item" style="background-color: #9900FF">3</div>
<div class="grid-item" style="background-color: #996633">4</div>
<div class="grid-item" style="background-color: #9966CC">5</div>
<div class="grid-item" style="background-color: #99FF00">6</div>
<div class="grid-item" style="background-color: #CC0099">7</div>
<div class="grid-item" style="background-color: #CC6600">8</div>
<div class="grid-item" style="background-color: #FF00FF">9</div>
</div>
</body>
</html>

2.5.2 align-content

与justify-items同理，方向为垂直方向。

3 内部元素属性

3.1 grid-area 定义区域

3.1.1 固定布局

如果单元没有内容，则用点号代替。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有勇气的牛排 语义化的 Grid 布局示例</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
color: black;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
gap: 10px;
}
header {
grid-area: header;
background-color: #ff6666;
padding: 20px;
text-align: center;
color: white;
font-size: 24px;
}
nav {
grid-area: sidebar;
background-color: #66ccff;
padding: 20px;
color: white;
}
main {
grid-area: main;
background-color: #99ff99;
padding: 20px;
color: white;
}
article {
background-color: rgba(0, 0, 0, 0.1);
margin-bottom: 15px;
padding: 10px;
border-radius: 5px;
}
aside {
grid-area: aside;
background-color: #ff99ff;
padding: 20px;
color: white;
}
footer {
grid-area: footer;
background-color: #ffcc66;
padding: 20px;
text-align: center;
color: white;
font-size: 18px;
}
</style>
</head>
<body>
<div class="grid-container">
<!-- 页眉 -->
<header>
有勇气的牛排博客
</header>
<!-- 侧边导航 -->
<nav>
<ul>
<li><a href="#" style="color:white;">链接 1</a></li>
<li><a href="#" style="color:white;">链接 2</a></li>
<li><a href="#" style="color:white;">链接 3</a></li>
</ul>
</nav>
<!-- 主要内容 -->
<main>
<article>
<h2>文章标题 1</h2>
<p>这是文章 1 的内容。语义化标签使页面更具结构性和可读性。</p>
</article>
</main>
<!-- 侧边栏 -->
<aside>
侧边栏
</aside>
<!-- 页脚 -->
<footer>
&copy; 2024 有勇气的牛排
</footer>
</div>
</body>
</html>

2.1.2 响应式布局

有勇氣的牛排創作：

https://www.couragesteak.com/article/487

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式 Grid 布局示例</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.grid-container {
display: grid;
gap: 10px;
padding: 10px;
height: 100vh;
grid-template-areas:
"header"
"main"
/*"aside"*/
/*"sidebar"*/
"footer";
}
header {
grid-area: header;
background-color: #ff6666;
padding: 20px;
text-align: center;
color: white;
font-size: 24px;
}
aside {
grid-area: aside;
display: none;
background-color: #ff99ff;
padding: 20px;
color: white;
}
main {
grid-area: main;
background-color: #99ff99;
padding: 20px;
color: white;
}
footer {
grid-area: footer;
background-color: #ffcc66;
padding: 20px;
text-align: center;
color: white;
font-size: 18px;
}
nav {
grid-area: sidebar;
display: none;
background-color: #66ccff;
padding: 20px;
color: white;
}
article {
background-color: rgba(0, 0, 0, 0.1);
margin-bottom: 15px;
padding: 10px;
border-radius: 5px;
}
/* 响应式设计 */
/* 针对平板 */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"main main aside"
"footer footer footer";
}
footer {
font-size: 16px;
}
/*nav {*/
/* display: block;*/
/*}*/
aside {
display: block;
}
}
/* 针对PC大屏 */
@media (min-width: 1024px) {
.grid-container {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
}
header {
font-size: 30px;
}
footer {
font-size: 20px;
}
nav {
display: block;
}
aside {
display: block;
}
}
</style>
</head>
<body>
<div class="grid-container">
<!-- 页眉 -->
<header>
有勇气的牛排博客
</header>
<!-- 侧边导航 -->
<nav>
<ul>
<li><a href="#" style="color:white;">链接 1</a></li>
<li><a href="#" style="color:white;">链接 2</a></li>
<li><a href="#" style="color:white;">链接 3</a></li>
</ul>
</nav>
<!-- 主要内容 -->
<main>
<article>
<h2>文章标题 1</h2>
<p>这是文章 1 的内容。语义化标签使页面更具结构性和可读性。</p>
</article>
<article>
<h2>文章标题 2</h2>
<p>这是文章 2 的内容。使用语义化标签能够提高 SEO 排名。</p>
</article>
</main>
<!-- 侧边栏 -->
<aside>
<h3>附加内容</h3>
<p>这里可以是附加的文章或广告信息。</p>
</aside>
<!-- 页脚 -->
<footer>
&copy; 2024 有勇气的牛排
</footer>
</div>
</body>
</html>

4 案例

4.1 基础案例

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有勇气的牛排 CSS Grid宫格 示例</title>
<style>
:root {
--grid-gap: 10px; /* 网格间距 */
--grid-item-height: 50px; /* 网格项高度 */
--bg-color: #9900FF; /* 背景色 */
--text-color: white; /* 字体颜色 */
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px; /*设置网格之间的间距*/
padding: 10px;
}
.grid-item {
height: 150px;
background-color: var(--bg-color);
border-radius: 10px;
/* 内容、文字样式 */
display: flex;
justify-content: center;
align-items: center;
color: var(--text-color);
font-size: 20px;
}
/* 响应式设计 */
@media (max-width: 900px) {
.grid-container {
grid-template-columns: repeat(2, 1fr); /* 小屏幕上使用 2 列 */
}
}
</style>
</head>
<body>
<h1>有勇气的牛排</h1> <!-- 添加标题以提高可读性 -->
<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>
</body>
</html>

评论区

提交评论

神州猎狐网游活动站

NEWS

推荐图文

亚马逊如何取消订单？已经购买过的商品订单怎么删除？

《战神觉醒》全球庆典：觉醒之战，荣耀启航2025年5月22日盛大开启！

洛克精灵战记2025春季庆典：精灵觉醒与勇者挑战

江山美人——2025年暑期大型历史恋爱互动游戏活动

惠安泉州欧乐堡海洋王国乐园游玩攻略简介,惠安泉州欧乐堡海洋王国乐园门票/地址/图片/开放时间/照片/门票价格【携程攻略】

西游大闹凌霄：齐天大圣归来狂欢季

淘宝店小蜜有必要开吗？店小蜜和官方机器人哪个好？

影之传说：暗影裂隙的觉醒之战——2025年4月2日跨服巅峰对决盛典

深入解读 CSS Grid 网格布局：现代网页布局的终极指南（适合新手与高级开发者）

有勇气的牛排

文章标题 1

文章标题 1

文章标题 2

有勇气的牛排

1 前言

1.1 设备支持支持时间点

1.2 容器布局属性（应用于 Grid 容器）

1.3 内部元素属性（应用于 Grid 项目）

2 容器布局属性

2.1 display

2.2 grid-templage-rows 行高 与 grid-template-columns 列属性

2.2.1 行高 px指定

2.2.2 行高 px与repeat

2.2.3 列 空间份额 fr

2.2.4 列 repeat

2.2.5 列 auto-fill 关键字

2.2.6 列 minmax() 函数

2.2.7 列 auto 关键字

2.3 网格间距

2.4 grid-auto-flow 属性(自动排列)

2.4.1 按行填充

2.4.2 紧密填充 dense

2.5 justify-items 、align-items 、 place-items 属性

2.5.1 justify-items

2.5.2 align-content

3 内部元素属性

3.1 grid-area 定义区域

3.1.1 固定布局

2.1.2 响应式布局

4 案例

4.1 基础案例

404 Not Found

2.2 grid-templage-rows 行高与 grid-template-columns 列属性

2.2.3 列空间份额 fr