2.1 属性display: grid
CSS Grid Layout 是一个强大的布局系统，可以通过行和列创建复杂的网页布局。使用CSS Grid的基本步骤就是创建一个Grid容器。下面我们来看看如何使用display: grid属性来创建一个Grid容器，并管理其基础方面。
创建Grid容器的基本概念
属性display: grid
display: grid属性将元素定义为一个Grid容器。这是一个基本步骤，允许使用CSS Grid的所有功能来布局元素。
示例:
CSS
.grid-container {
display: grid;
}
Grid容器的基本元素
通过属性display: grid定义Grid容器后，该容器的所有子元素自动成为grid元素。这允许在容器内管理它们的布局和对齐。
示例:
CSS
.grid-container {
display: grid;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid容器示例</title>
<link rel="stylesheet" href="styles.css">
</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>
</body>
</html>
代码解释:
.grid-container: 通过display: grid属性将元素定义为Grid容器，同时增加边框以便视觉上突出容器.grid-item: 定义Grid容器内元素的基本样式，比如背景色、文本颜色、内边距、边框和文本居中
2.2 嵌套Grid容器
CSS Grid的一个优势是可以创建嵌套Grid容器。这允许创建复杂的布局，其中一个grid元素可以成为其子元素的grid容器。
示例:
CSS
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.nested-grid-container {
display: grid;
gap: 5px;
background-color: #2980b9;
padding: 10px;
}
.nested-grid-item {
background-color: #1abc9c;
padding: 10px;
border: 1px solid #fff;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌套Grid容器</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">元素 1</div>
<div class="grid-item">
<div class="nested-grid-container">
<div class="nested-grid-item">嵌套元素 1</div>
<div class="nested-grid-item">嵌套元素 2</div>
</div>
</div>
<div class="grid-item">元素 3</div>
</div>
</body>
</html>
代码解释:
-
.nested-grid-container: 通过display: grid属性定义嵌套Grid容器，同时增加元素间的间隙(gap: 5px)和内边距(padding: 10px) -
.nested-grid-item: 定义嵌套Grid容器内元素的基本样式，比如背景色、内边距和边框
2.3 控制Grid容器的行为
display: grid属性还允许使用其他属性来控制Grid容器的行为。例如，grid-auto-flow属性控制元素的自动布局。
示例:
CSS
.grid-container {
display: grid;
grid-auto-flow: row;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>具有auto-flow的Grid容器</title>
<link rel="stylesheet" href="styles.css">
</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>
</body>
</html>
2.4 在Grid容器中使用Flexbox
在某些情况下，在grid元素中使用Flexbox可能对创建更复杂的布局很有帮助。这可以结合两者的优势。
CSS
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.flex-container {
display: flex;
gap: 10px;
}
.flex-item {
background-color: #1abc9c;
padding: 10px;
flex: 1;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在Grid容器中包含Flexbox</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item flex-container">
<div class="flex-item">Flex元素 1</div>
<div class="flex-item">Flex元素 2</div>
</div>
<div class="grid-item">元素 2</div>
<div class="grid-item">元素 3</div>
</div>
</body>
</html>
代码解释:
.flex-container: 通过display: flex属性将grid元素定义为flex容器.flex-item: 定义flex容器内元素的基本样式，比如背景色、内边距和灵活性(flex: 1)
GO TO FULL VERSION