Grid 布局
2024-01-15 本文已影响0人
Max_Law
CSS Grid 是一种先进的二维布局系统，专门为解决网页设计中的复杂布局问题而引入。以下是一些关于 CSS Grid 的关键概念和特性：
| 特性 | 描述 |
|---|---|
| 网格容器 (Grid Container) | 设置 display: grid 或 display: inline-grid 的元素成为网格容器。 |
| 网格项目 (Grid Items) | 网格容器的直接子元素自动成为网格项目，可在网格内定位和布局。 |
| 网格线 (Grid Lines) | 虚拟线用于划分网格轨道，由数字或名称标识。 |
| 网格轨道 (Grid Tracks) | 网格线之间的空间，代表行（垂直）或列（水平）。 |
| 网格模板区域 (Grid Template Areas) | 定义命名区域并描述其位置关系。 |
| 网格模板列和行 (Grid Template Columns and Rows) | 定义网格的列和行结构，可使用固定单位、百分比、弹性单位或自动大小。 |
| 自动流 (Auto Flow) | 当未指定位置时，网格项目按源顺序自动填充空余网格单元格。 |
| 对齐和间距 (Alignment and Gutters) | 控制网格项目和网格行/列的对齐方式以及它们之间的间距。 |
| 网格区域 (Grid Areas) | 由一个或多个相邻网格单元格组成的区域，用于定位和样式化网格项目。 |
| 线名称和位置 (Line Names and Placement) | 给网格线命名并使用名称来定位网格项目，而不是依赖线编号。 |
下面用实际例子说明：
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* {
padding: 0;
margin: 0;
}
.grid-container {
width: 40vw;
height: 40vh;
margin: 20px auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
grid-template-areas:
'header header header'
'main main sidebar'
'footer footer footer';
gap: 10px;
justify-items: center;
align-items: stretch;
}
.grid-container > .item {
width: 100%;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.header {
grid-area: header;
background-color: lightblue;
}
.main {
grid-area: main;
background-color: lightgreen;
}
.sidebar {
grid-area: sidebar;
background-color: lightyellow;
}
.footer {
grid-area: footer;
background-color: lightgray;
}
</style>
</head>
<body>
<div class="grid-container">
<header class="item header">Header</header>
<main class="item main">Main Content</main>
<aside class="item sidebar">Sidebar</aside>
<footer class="item footer">Footer</footer>
</div>
</body>
</html>
实际布局
在这个例子中：
- display: 设置 .grid-container 元素为网格容器。
- grid-template-columns 和 grid-template-rows: 定义网格的列和行结构，创建一个三列（等宽）和三行（第一行和第三行自适应高度，第二行占据剩余空间）的网格。
- grid-template-areas: 定义网格模板区域，包括 header、main、sidebar 和 footer。
- gap: 设置网格项目之间的间距为 10px。
- justify-items 和 align-items: 控制所有网格项目在各自单元格内的水平居中对齐和垂直填充对齐。
然后，我们为每个子元素（.header、.main、.sidebar 和 .footer）设置 grid-area 属性，将它们与在 grid-template-areas 中定义的区域名称关联起来。
这个例子展示了如何使用 CSS Grid 布局创建一个常见的网页布局，包括页眉、主要内容、侧边栏和页脚。每个部分都被分配到相应的网格区域，并且可以根据需要调整布局和样式。
