当前位置：首页 > article >正文

CSS系列（35）-- Subgrid详解

article 2024/12/26 23:27:44

前端技术探索系列：CSS Subgrid详解 📐

致读者：探索子网格布局的艺术 👋

前端开发者们，

今天我们将深入探讨 CSS Subgrid，这个强大的网格布局扩展特性。

基础概念 🚀

子网格设置

/* 父网格 */
.parent-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    gap: 20px;
}

/* 子网格 */
.child-grid {
    grid-column: 2 / 12;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

/* 混合使用 */
.mixed-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto auto;  /* 独立行定义 */
}

对齐控制

/* 网格对齐 */
.aligned-grid {
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    justify-items: start;
}

/* 内容对齐 */
.content-grid {
    display: grid;
    grid-template-columns: subgrid;
    align-content: space-between;
    justify-content: space-around;
}

/* 单元格对齐 */
.grid-item {
    align-self: stretch;
    justify-self: center;
}

高级特性 🎯

嵌套布局

/* 多层嵌套 */
.nested-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.level-1 {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
}

.level-2 {
    grid-column: span 2;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

/* 混合布局 */
.hybrid-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: 
        minmax(100px, auto)
        subgrid;
}

响应式设计

/* 基础响应式 */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.responsive-subgrid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
}

/* 断点适配 */
@media (min-width: 768px) {
    .adaptive-grid {
        grid-template-columns: repeat(12, 1fr);
    }
    
    .adaptive-subgrid {
        grid-column: 3 / 11;
        grid-template-columns: subgrid;
    }
}

实际应用 💫

卡片布局

/* 卡片网格 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.card {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto 1fr auto;
}

.card-header {
    grid-column: 1 / -1;
}

.card-content {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

表单布局

/* 表单网格 */
.form-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
}

.form-group {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
}

.form-label {
    grid-column: 1;
    align-self: center;
}

.form-input {
    grid-column: 2;
}

布局模式 ⚡

圣杯布局

/* 现代圣杯布局 */
.holy-grail {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(auto, 3fr) minmax(150px, 1fr);
    grid-template-rows: auto 1fr auto;
}

.content-area {
    grid-column: 2;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .holy-grail {
        grid-template-columns: 1fr;
    }
    
    .content-area {
        grid-column: 1 / -1;
    }
}

仪表板布局

/* 仪表板网格 */
.dashboard {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: 1rem;
}

.widget {
    grid-column: span 3;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto 1fr;
}

.widget-content {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}