css制作栅格
CSS 栅格布局基础
使用 CSS Grid 可以快速创建灵活的栅格系统。以下是一个基础的 12 列栅格示例：
.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
}响应式栅格实现
通过媒体查询实现不同屏幕尺寸下的列数变化：
@media (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(6, 1fr);
}
}栅格项跨度控制
使用 grid-column 属性控制元素跨越的列数：
.grid-item-4 {
grid-column: span 4;
}
.grid-item-6 {
grid-column: span 6;
}自动填充与适应
auto-fill 和 auto-fit 可以实现动态栅格：
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}传统浮动栅格方案
兼容旧浏览器的浮动栅格方案：
.float-grid {
width: 100%;
overflow: hidden;
}
.float-grid-item {
float: left;
width: 25%;
box-sizing: border-box;
}Flexbox 栅格替代
使用 Flexbox 实现栅格布局：
.flex-grid {
display: flex;
flex-wrap: wrap;
}
.flex-item {
flex: 1 0 25%;
}栅格间距处理
控制栅格间距的几种方法：
/* 统一间距 */
.grid-gap {
gap: 15px;
}
/* 单独控制行列间距 */
.grid-gap-specific {
row-gap: 10px;
column-gap: 20px;
}栅格对齐方式
内容在栅格中的对齐方式：
.grid-align {
align-items: center;
justify-content: space-between;
}嵌套栅格系统
创建嵌套的栅格结构：
.nested-grid {
display: grid;
grid-template-columns: 30% 70%;
}浏览器兼容性处理
添加供应商前缀确保兼容性：
.legacy-grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
