Grid布局示例代码

示例一

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grid Layout Example</title><style>/* 基础样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;display: flex;flex-direction: column;align-items: center;gap: 20px;padding: 20px;}.grid-container {display: grid;gap: 10px;/* 间隔 */border: 1px solid #ccc;padding: 10px;width: 100%;max-width: 600px;}.grid-item {background-color: #f0f0f0;padding: 10px;text-align: center;border: 1px solid #ddd;}/* 单行多列布局 */.single-row {grid-template-columns: repeat(4, 1fr);/* 创建4列，每列占1份 */}/* 单列多行布局 */.single-column {grid-template-rows: repeat(4, 1fr);/* 创建4行，每行占1份 */}/* 多行多列布局 */.multi-row-column {grid-template-columns: repeat(3, 1fr);/* 创建3列 */grid-template-rows: repeat(2, 1fr);/* 创建2行 */}/* 自适应布局 */.auto-fit {grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));/* 自适应列数，每列最小宽度100px */}/* 带有间隔的布局 */.gap {grid-template-columns: repeat(3, 1fr);/* 创建3列 */grid-template-rows: repeat(2, 1fr);/* 创建2行 */gap: 20px;/* 增大间隔 */}/* 对齐方式布局 */.align-items {grid-template-columns: repeat(3, 1fr);/* 创建3列 */grid-template-rows: repeat(2, 1fr);/* 创建2行 */align-items: center;/* 垂直居中对齐 */justify-items: center;/* 水平居中对齐 */}</style>
</head><body><!-- 单行多列布局 --><div class="grid-container single-row"><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><!-- 单列多行布局 --><div class="grid-container single-column"><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><!-- 多行多列布局 --><div class="grid-container multi-row-column"><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><!-- 自适应布局 --><div class="grid-container auto-fit"><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><!-- 带有间隔的布局 --><div class="grid-container gap"><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><!-- 对齐方式布局 --><div class="grid-container align-items"><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>

示例二

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grid Layout Example</title><style>/* 基础样式 */
body {font-family: Arial, sans-serif;margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;
}.grid-container {display: grid;grid-template-columns: repeat(3, 1fr); /* 创建3列，每列占1份 */grid-template-rows: repeat(3, 1fr); /* 创建3行，每行占1份 */gap: 10px; /* 设置行和列之间的间隔 */width: 300px;height: 300px;background-color: #fff;border: 1px solid #ccc;padding: 10px;
}.grid-item {background-color: #f0f0f0;padding: 10px;text-align: center;border: 1px solid #ddd;
}/* 第一个格子占两列两行 */
.item1 {grid-column: 1 / 3; /* 从第1列到第3列 */grid-row: 1 / 3; /* 从第1行到第3行 */
}/* 第二个格子占一列一行 */
.item2 {grid-column: 3 / 4; /* 从第3列到第4列 */grid-row: 1 / 2; /* 从第1行到第2行 */
}/* 第三个格子占一列一行 */
.item3 {grid-column: 3 / 4; /* 从第3列到第4列 */grid-row: 2 / 3; /* 从第2行到第3行 */
}/* 第二行的格子都是一列一行 */
.item4 {grid-column: 1 / 2; /* 从第1列到第2列 */grid-row: 3 / 4; /* 从第3行到第4行 */
}.item5 {grid-column: 2 / 3; /* 从第2列到第3列 */grid-row: 3 / 4; /* 从第3行到第4行 */
}.item6 {grid-column: 3 / 4; /* 从第3列到第4列 */grid-row: 3 / 4; /* 从第3行到第4行 */
}</style>
</head>
<body><div class="grid-container"><!-- 第一行 --><div class="grid-item item1">1 (占两列两行)</div><div class="grid-item item2">2 (占一列一行)</div><div class="grid-item item3">3 (占一列一行)</div><!-- 第二行 --><div class="grid-item item4">4 (占一列一行)</div><div class="grid-item item5">5 (占一列一行)</div><div class="grid-item item6">6 (占一列一行)</div></div>
</body>
</html>