1,041
社区成员
发帖
与我相关
我的任务
分享前端CSS-CSS网格布局| “朝闻道”知识分享大赛
这是我参加朝闻道知识分享大赛的第35篇文章。
CSS 网格布局（Grid Layout）是一个功能强大的二维布局系统，允许我们创建复杂的布局结构。以下是网格布局的详细教程，涵盖基础概念、属性、属性值的作用，以及每个知识点的完整 HTML 示例。
1. 网格容器和网格项目
-
定义：一个 HTML 元素在设置
display: grid;或display: inline-grid;后会成为网格容器。 -
作用：启用网格布局模式，容器内的直接子元素（网格项目）将自动成为网格布局的一部分。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网格容器示例</title>
<style>
.grid-container {
display: grid;
background-color: #f0f0f0;
padding: 10px;
gap: 10px;
}
.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
font-size: 18px;
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>
</body>
</html>
2. 定义网格的行和列
通过 grid-template-columns 和 grid-template-rows 属性定义网格的列和行。每个列或行可以指定宽度和高度，网格容器会将子元素排列在定义的行和列中。
属性
-
grid-template-columns：定义网格容器的列结构。 -
grid-template-rows：定义网格容器的行结构。
属性值
-
固定值：
px、%等，例如100px表示固定宽度或高度。 -
弹性单位：
fr表示按比例分配剩余空间，例如1fr 2fr表示按 1:2 分配。 -
auto：自动根据内容决定大小。 -
minmax(min, max)：定义最小值和最大值的范围。 -
repeat()：简化重复的行或列定义。
3. 网格间距（gap）
gap 属性用于设置网格项目之间的间距，包括行间距（row-gap）和列间距（column-gap）。
属性
-
gap：同时设置行间距和列间距。 -
row-gap：单独设置行间距。 -
column-gap：单独设置列间距。
4. 跨行和跨列（grid-column 和 grid-row）
grid-column 和 grid-row 属性用于控制网格项目跨越的行数和列数。
属性
-
grid-column：设置项目跨越的列范围。 -
grid-row：设置项目跨越的行范围。
属性值
-
start / end：
start指定起始行或列，end指定结束行或列。 -
span：使用
span表示跨越的列数或行数。
5. 自动布局（auto-fill 和 auto-fit）
使用 auto-fill 和 auto-fit 可以创建自适应的网格布局，网格项目会自动填满容器空间，非常适合响应式设计。
属性
-
auto-fill：尽可能多地填充网格单元，允许多余的项目换行。 -
auto-fit：填充并压缩空余的网格单元。
示例：自适应网格布局
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自动布局</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}
.grid-item {
background-color: #FFC107;
color: white;
padding: 20px;
font-size: 18px;
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 class="grid-item">7</div>
<div class="grid-item">8</div>
</div>
</body>
</html>
6. 区域命名（grid-template-areas 和 grid-area）
使用 grid-template-areas 可以为布局区域命名，结合 grid-area 将网格项目放置在命名区域内。适合于构建复杂布局，如头部、侧边栏、内容和底部。
属性
-
grid-template-areas：定义网格容器的布局区域。 -
grid-area：指定网格项目的位置，与grid-template-areas匹配。
示例：命名区域布局
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>区域命名布局</title>
<style>
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr auto;
gap: 10px;
height: 100vh;
background-color: #f0f0f0;
padding: 10px;
}
.header {
grid-area: header;
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #333;
color: white;
padding: 20px;
}
.content {
grid-area: content;
background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
}
.footer {
grid-area: footer;
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="header">头部</div>
<div class="sidebar">侧边栏</div>
<div class="content">
<p>这是内容区域。可以容纳文章、图片、视频等内容。</p>
</div>
<div class="footer">页脚</div>
</div>
</body>
</html>
7. 小结
以上介绍了网格布局的基础属性和常见用法，包括：
-
网格行和列：通过
grid-template-columns和grid-template-rows设置列宽和行高。 -
网格间距：通过
gap、row-gap和column-gap设置行列间距。 -
跨行跨列：使用
grid-column和grid-row控制项目跨越范围。 -
自动布局：使用
auto-fill和auto-fit实现响应式布局。 -
区域命名：通过
grid-template-areas命名区域，为复杂布局提供便捷的方法。
...全文
请发表友善的回复…
发表回复
