CSS Grid 网格布局中的一些实用小技巧

‌1. 使用 repeat() 简化重复定义‌
避免手动重复写列或行，用 repeat() 函数快速生成规律结构。
‌.grid-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr); /* 3列等宽 /  grid-template-rows: repeat(2, 100px);  / 2行高100px */
}

‌2. 自适应布局：auto-fill 与 auto-fit‌

根据容器宽度自动调整列数，适合响应式卡片网格。
.grid-container {
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

‌auto-fill‌：尽可能创建轨道（即使为空）。
auto-fit‌：自动压缩现有项目填满容器，‌更常用‌ ‌。

‌3. 限制尺寸范围：minmax()‌

确保轨道不会过小或过大，提升布局弹性。
.grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
表示每列最小200px，最大占1份可用空间

4. 快速对齐：place-items 和 place-content‌

• ‌place-items‌：同时设置 justify-items 和 align-items。

• ‌place-content‌：同时设置 justify-content 和 align-content。

• .grid-container {  place-items: center; /* 水平垂直居中所有项目 *
  /}

等同于 align-items: center; justify-items: center

5、控制项目跨越：grid-column / grid-row + span‌
让项目跨越多列或多行。
.item {
 grid-column: 1 / span 2; /* 从第1列开始，跨越2列 /
 grid-row: 2 / 4; / 从第2行到第4行（不包含4） */
 }
span 后数字不能为0或负数 ‌

6. 调试技巧：添加背景网格

临时为网格添加视觉辅助线，便于调试。
.grid-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background-image: linear-gradient(to right, #ccc 1px, transparent 1px),
    linear-gradient(to bottom, #ccc 1px, transparent 1px);  background-size: calc(100% / 3) 1px, 1px calc(100% / 3);
}
7、响应式网格 + 媒体查询‌
结合媒体查询实现移动端适配。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
@media (max-width: 600px) {
.card-grid {grid-template-columns: 1fr;}
}

注意事项‌

• 设置 display: grid 后，子元素的 float、display: inline-block 等布局属性‌失效‌ 。

• Grid 兼容性极好，主流浏览器均支持 ‌