Appearance
第4章：开启Grid布局
在本节中，我们将介绍如何开启Grid布局，以及开启Grid布局后项目的默认行为。
4.1 容器开启Grid布局的语法
要开启Grid布局，需要将容器的display属性设置为grid或inline-grid。
语法
css
.container {
display: grid; /* 块级Grid容器 */
}
.container {
display: inline-grid; /* 行内Grid容器 */
}4.2 grid与inline-grid的区别
块级Grid容器
display: grid- 容器会占据整个父元素的宽度
- 表现为块级元素，前后会有换行
行内Grid容器
display: inline-grid- 容器的宽度由内容决定
- 表现为行内元素，前后不会有换行
代码示例
html
<!DOCTYPE html>
<html>
<head>
<title>grid vs inline-grid</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px;
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}
.inline-grid-container {
display: inline-grid;
grid-template-columns: 100px 100px;
grid-template-rows: 50px;
gap: 10px;
background-color: #e0e0e0;
padding: 10px;
}
.item {
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>grid vs inline-grid</h1>
<h2>display: grid</h2>
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
</div>
<p>块级Grid容器，占据整个宽度</p>
<h2>display: inline-grid</h2>
<div class="inline-grid-container">
<div class="item">1</div>
<div class="item">2</div>
</div>
<p>行内Grid容器，宽度由内容决定</p>
</body>
</html>4.3 开启Grid布局后，项目的默认行为
默认行为
- 项目排列：项目会按照网格线的顺序自动排列，从左到右，从上到下
- 网格尺寸：如果没有设置
grid-template-columns和grid-template-rows，网格会根据项目的内容自动调整尺寸 - 项目大小：项目会占据整个网格单元格的空间
- 对齐方式：项目在单元格中默认拉伸对齐（stretch）
代码示例
html
<!DOCTYPE html>
<html>
<head>
<title>Grid布局默认行为</title>
<style>
.container {
display: grid;
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}
.item {
background-color: #3498db;
color: white;
padding: 20px;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>Grid布局默认行为</h1>
<div class="container">
<div class="item">项目 1</div>
<div class="item">项目 2</div>
<div class="item">项目 3</div>
<div class="item">项目 4</div>
</div>
<p>默认情况下，项目会自动排列，网格尺寸由内容决定</p>
</body>
</html>4.4 实操案例：开启Grid布局，观察项目默认排列效果
代码示例
html
<!DOCTYPE html>
<html>
<head>
<title>Grid布局默认排列</title>
<style>
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 80px 80px;
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}
.item {
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>Grid布局默认排列</h1>
<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>
<p>项目按照从左到右，从上到下的顺序排列</p>
</body>
</html>4.5 常见错误：开启Grid布局后样式不生效、网格不显示的原因排查
1. 样式不生效
原因
- CSS选择器错误
- 浏览器不支持Grid布局（现代浏览器都支持）
- 其他CSS属性覆盖了Grid布局
解决方案
- 检查CSS选择器是否正确
- 确保容器的
display属性设置为grid或inline-grid - 检查是否有其他CSS属性影响了Grid布局
2. 网格不显示
原因
- 没有设置
grid-template-columns和grid-template-rows - 项目内容为空
- 容器宽度或高度为0
解决方案
- 设置
grid-template-columns和grid-template-rows - 确保项目有内容
- 检查容器的宽度和高度
3. 项目堆叠在一起
原因
- 没有设置
grid-template-columns，导致所有项目都在同一列
解决方案
- 设置
grid-template-columns来定义列数和列宽
实操练习
- 创建一个块级Grid容器，包含2列3行
- 创建一个行内Grid容器，包含3列2行
- 观察Grid布局的默认排列行为
- 排查并解决Grid布局不显示的问题
通过本节的学习，你已经了解了如何开启Grid布局以及相关的注意事项。接下来，我们将学习Grid容器的核心属性，如网格轨道尺寸设置、网格间距设置等。