列 (Columns)
行 (Rows)
间距 (Gap)
预览
1
2
3
4
5
6
7
8
9
CSS代码
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
column-gap: 16px;
row-gap: 16px;
}HTML结构
<div class="grid-container"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> <div>Item 6</div> <div>Item 7</div> <div>Item 8</div> <div>Item 9</div> </div>
使用说明
- grid-template-columns: 定义列的宽度
- grid-template-rows: 定义行的高度
- gap: 单元格之间的间距
- fr: 弹性单位，按比例分配剩余空间
- 点击单元格可设置跨行/跨列