本文由 资源共享网 – ziyuan 发布，转载请注明出处，如有问题请联系我们！[免费]display的grid属性的完整用法
收藏CSS Grid 布局完整指南
CSS Grid 是一个强大的二维布局系统，可以同时处理行和列，让我们能够创建复杂且响应式的网页布局。下面我将为您详细介绍 Grid 布局的完整用法，并提供一个可视化示例。
Grid 容器属性
1. 定义 Grid 容器 css
.container {
display: grid; /* 或 inline-grid */
}
.container {
display: grid; /* 或 inline-grid */
}
2. 定义行和列
```css
.container {
/* 定义列 */
grid-template-columns: 100px 1fr 2fr;
/* 定义行 */
grid-template-rows: 50px auto 100px;
/* 使用 repeat() 函数 */
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* 定义网格区域 */
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
### 3. 间距
/* 列间距 */
column-gap: 15px;
/* 简写 */
gap: 10px 15px; /* 行间距 列间距 */
gap: 20px; /* 行和列使用相同间距 */
}
### 4. 对齐方式
/* 垂直对齐所有网格项 */
align-items: start | end | center | stretch;
/* 简写 */
place-items:
/* 当网格小于容器时的水平对齐 */ justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
/* 当网格小于容器时的垂直对齐 */ align-content: start | end | center | stretch | space-around | space-between | space-evenly;
/* 简写 */ place-content:
### 5. 自动网格
/* 隐式网格的列大小 */ grid-auto-columns: 150px;
/* 自动放置算法 */ grid-auto-flow: row | column | row dense | column dense; }
## Grid 项目属性
### 1. 项目位置
/* 简写 */ grid-column: 1 / 3; grid-column: 1 / span 2;
/* 行开始/结束位置 */ grid-row-start: 2; grid-row-end: 4;
/* 简写 */ grid-row: 2 / 4; grid-row: 2 / span 2;
/* 指定网格区域 */ grid-area: header;
/* 简写：row-start / column-start / row-end / column-end */ grid-area: 1 / 1 / 3 / 3; }
### 2. 项目对齐
/* 单个项目的垂直对齐 */ align-self: start | end | center | stretch;
/* 简写 */ place-self:
实用函数和关键字
-
repeat(): 重复轨道模式
- minmax(): 定义大小范围
- fit-content(): 适应内容大小
- auto-fill 和 auto-fit: 自动填充轨道
- fr 单位: 分数单位，分配剩余空间实际示例
下面是一个完整的 Grid 布局示例：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid 布局示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
text-align: center;
margin-bottom: 30px;
color: #2c3e50;
font-size: 2.5rem;
}
.description {
text-align: center;
margin-bottom: 40px;
color: #555;
font-size: 1.1rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 200px 150px 100px;
gap: 15px;
margin-bottom: 40px;
}
.grid-item {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.grid-item:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.item-1 {
grid-column: 1 / 3;
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
}
.item-2 {
grid-column: 3 / 5;
background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
}
.item-3 {
grid-row: 2 / 4;
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}
.item-4 {
grid-column: 2 / 5;
grid-row: 2 / 3;
background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
}
.item-5 {
grid-column: 2 / 4;
grid-row: 3 / 4;
background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
}
.item-6 {
grid-column: 4 / 5;
grid-row: 3 / 4;
background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%);
}
.item-7 {
grid-column: 1 / 5;
background: linear-gradient(135deg, #fccb90 0%, #d57eeb 100%);
}
.item-title {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 10px;
color: #2c3e50;
}
.item-desc {
font-size: 0.9rem;
text-align: center;
color: #34495e;
}
.code-example {
background: #2c3e50;
color: #ecf0f1;
padding: 25px;
border-radius: 8px;
margin-bottom: 40px;
overflow-x: auto;
}
.code-example h2 {
margin-bottom: 15px;
color: #3498db;
}
.code-example pre {
font-family: 'Courier New', Courier, monospace;
line-height: 1.5;
}
.properties-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.property-card {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.property-card h3 {
color: #2c3e50;
margin-bottom: 10px;
border-bottom: 2px solid #3498db;
padding-bottom: 5px;
}
.property-card p {
color: #555;
font-size: 0.95rem;
}
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
grid-template-rows: repeat(7, 150px);
}
.item-1, .item-2, .item-3, .item-4, .item-5, .item-6, .item-7 {
grid-column: 1;
}
.item-3 {
grid-row: auto;
}
.item-4 {
grid-row: auto;
}
.item-5 {
grid-row: auto;
}
.item-6 {
grid-row: auto;
}
}
</style>
</head>
<body>
<div>
<h1>CSS Grid 布局完整指南</h1>
<div>
CSS Grid 是一个强大的二维布局系统，可以同时处理行和列。
下面是一个展示 Grid 布局各种功能的示例。
</div>
<div>
<div class="grid-item item-1">
<div>Header</div>
<div>grid-column: 1 / 3</div>
</div>
<div class="grid-item item-2">
<div>Navigation</div>
<div>grid-column: 3 / 5</div>
</div>
<div class="grid-item item-3">
<div>Sidebar</div>
<div>grid-row: 2 / 4</div>
</div>
<div class="grid-item item-4">
<div>Main Content</div>
<div>grid-column: 2 / 5; grid-row: 2 / 3</div>
</div>
<div class="grid-item item-5">
<div>Article</div>
<div>grid-column: 2 / 4; grid-row: 3 / 4</div>
</div>
<div class="grid-item item-6">
<div>Ads</div>
<div>grid-column: 4 / 5; grid-row: 3 / 4</div>
</div>
<div class="grid-item item-7">
<div>Footer</div>
<div>grid-column: 1 / 5</div>
</div>
</div>
<div>
<h2>Grid 容器 CSS 代码</h2>
<pre><code>.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 200px 150px 100px;
gap: 15px;
}</code></pre>
</div>
<div>
<div>
<h3>grid-template-columns</h3>
<p>定义网格的列轨道大小和结构。可以使用长度值、百分比、fr单位或minmax()函数。</p>
</div>
<div>
<h3>grid-template-rows</h3>
<p>定义网格的行轨道大小和结构。用法与grid-template-columns类似。</p>
</div>
<div>
<h3>gap</h3>
<p>设置行和列之间的间距。是row-gap和column-gap的简写形式。</p>
</div>
<div>
<h3>grid-template-areas</h3>
<p>通过命名网格区域来定义网格模板，提供直观的布局方式。</p>
</div>
<div>
<h3>grid-column / grid-row</h3>
<p>设置网格项目在网格中的位置，可以指定起始线和结束线。</p>
</div>
<div>
<h3>justify-items / align-items</h3>
<p>控制网格项目在单元格内的对齐方式（水平/垂直）。</p>
</div>
</div>
</div>
</body>
</html>
关键要点
Grid vs Flexbox:
常用布局模式:
响应式设计:
auto-fill 和 auto-fit 创建自适应网格
- 结合媒体查询调整网格结构浏览器支持:
