系列目录
上一篇：白骑士的CSS教学进阶篇之CSS变量 3.4.3 动态改变CSS变量
CSS Grid布局是现代网页设计中的一个强大工具，它提供了更为灵活和直观的方式来创建复杂的布局。与传统的浮动布局和Flexbox布局相比，Grid布局允许开发者在二维空间中精确地定义行和列，从而构建出复杂的网页结构。在本节中，我们将深入探讨CSS Grid布局的高级概念，首先从网格容器与网格项的定义与操作开始。在使用CSS Grid布局时，首先需要了解网格容器（Grid Container）和网格项（Grid Items）的基本概念。理解这两个核心概念是掌握CSS Grid布局的基础。
网格容器（Grid Container）
网格容器是应用了‘display: grid‘或‘display: inline-grid‘属性的元素。这个容器定义了一个网格布局环境，在这个环境中可以指定行和列的数量、间隔、对齐方式等。网格容器内的所有直接子元素都会自动成为网格项，并遵循网格布局的规则进行排列。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid布局示例</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
padding: 10px;
background-color: #f8f8f8;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<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>
</body>
</html>在这个示例中，‘.grid-container‘元素被定义为一个网格容器，‘grid-template-columns: repeat(3, 1fr)‘指示该容器有三列，每列的宽度相等。‘grid-gap: 10px‘用于在网格项之间设置间距。‘.grid-container‘中的每个直接子元素（‘.grid-item‘）都成为一个网格项，并按照网格布局自动排列。
网格项（Grid Items）
网格项是网格容器内部的直接子元素。每个网格项占据网格容器中的一个或多个网格单元（Grid Cell）。通过CSS属性，可以精确控制每个网格项的布局行为，比如定义网格项跨越的行数和列数，或是调整网格项在单元格中的对齐方式。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid布局中的网格项</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
grid-gap: 10px;
padding: 10px;
}
.grid-item {
background-color: #e74c3c;
color: white;
padding: 20px;
text-align: center;
}
.grid-item:nth-child(1) {
grid-column: span 2;
grid-row: span 2;
}
.grid-item:nth-child(3) {
grid-column: span 2;
}
</style>
</head>
<body>
<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>
</body>
</html>在这个示例中，‘.grid-item:nth-child(1)‘占据了两列和两行，即它跨越了多个网格单元。通过‘grid-column: span 2;‘和‘grid-row: span 2;‘，我们可以精确控制这个网格项在容器中的布局。‘.grid-item:nth-child(3)‘则只跨越了两列。通过这些属性，开发者可以轻松实现复杂的布局需求。
网格容器属性
除了‘grid-template-columns‘和‘grid-template-rows‘之外，网格容器还有其他重要属性，用于控制网格布局的整体表现：
- grid-template-areas：定义网格区域，用于命名布局中的不同区域。
- grid-auto-rows/grid-auto-columns：设置自动生成的行和列的大小。
- justify-items/align-items：控制网格项在单元格中的水平和垂直对齐方式。
- justify-content/align-content：控制整个网格布局在容器中的对齐方式。
示例：
.grid-container {
display: grid;
grid-template-columns: 100px 200px 1fr;
grid-template-rows: auto 100px;
grid-template-areas:
"header header header"
"sidebar content content";
}
.grid-item-header {
grid-area: header;
}
.grid-item-sidebar {
grid-area: sidebar;
}
.grid-item-content {
grid-area: content;
}在这个例子中，‘grid-template-areas‘定义了一个布局区域，并使用‘grid-area‘将网格项分配到这些区域。这样，可以通过简单的区域名称来实现复杂的布局。
网格项属性
网格项属性用于控制网格项在网格容器中的位置和尺寸。常用的网格项属性包括：
- grid-column-start/grid-column-end：定义网格项在列上的起始和结束位置。
- grid-row-start/grid-row-end：定义网格项在行上的起始和结束位置。
- grid-area：将网格项放置在特定的区域，结合‘grid-template-areas‘使用。
- justify-self/align-self：控制单个网格项在单元格中的对齐方式。
示例：
.grid-item {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
justify-self: center;
align-self: end;
}通过这些属性，可以精确控制每个网格项在网格中的位置，以及在单元格中的对齐方式。
总结
CSS Grid布局是一个功能强大的工具，允许开发者在二维空间中创建复杂的布局。理解网格容器和网格项的基本概念及其高级用法，是掌握Grid布局的关键。在接下来的章节中，我们将进一步探讨CSS Grid的其他高级特性，帮助你更好地运用Grid布局实现各种设计需求。
下一篇：白骑士的CSS高级篇之CSS Grid布局进阶 4.1.2 网格模板与区域
扫一扫
1697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
