从 “布局卡壳” 到 “秒出结构”：Grid 布局常见案例拆解，新手也能抄作业（附完整代码）

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2025年9月22日 15:28 本文热度 1152

在上一篇《CSS 布局大比拼：浮动、Flex、Grid 实战对比，看完就知道该用哪个！》文章中我们主要是对常见的布局方式做了个对比，我们今天主要是通过常见的布局场景来看看Grid怎么用。

基础网格布局

我们先来看看一个简单的3x3网格，使用 fr 单位和 gap，第二列的宽度是另外两列的两倍(2fr vs 1fr)。中间的行高度会随着内容变化，而首尾行高度固定。每个项目（item）之间都有20px的间隙。

<style>        .container {            display: grid;            /* 定义3列，宽度比为 1:2:1 */            grid-template-columns: 1fr 2fr 1fr;            /* 定义3行，第一和第三行高度为80px，中间行自动填充 */            grid-template-rows: 80px auto 80px;            /* 设置行间距和列间距均为20px */            gap: 20px;            height: 100vh; /* 让容器占满整个视口高度 */            padding: 20px;            box-sizing: border-box;            background-color: #f0f0f0;        }
        .item {            background-color: #3498db;            color: white;            border-radius: 5px;            display: flex;            justify-content: center;            align-items: center;            font-size: 1.5rem;            font-weight: bold;        }
        /* 为不同的项目添加不同的颜色，便于区分 */        .item:nth-child(even) {            background-color: #2ecc71;        }    </style>        <div class="container">        <div class="item">1</div>        <div class="item">2</div>        <div class="item">3</div>        <div class="item">4</div>        <div class="item">5</div>        <div class="item">6</div>        <div class="item">7</div>        <div class="item">8</div>        <div class="item">9</div>    </div>

经典的圣杯布局

使用Grid轻松实现Header, Footer, Sidebar, Main Content区域，并添加简单的响应式。在桌面端，会看到经典的Header、左右布局、Footer结构。调整浏览器窗口宽度小于768px时，布局会自动变为单列堆叠，Sidebar移动到Main Content上方，非常适合移动设备浏览。

PC端

移动端

<style>        body {            margin: 0;            padding: 0;        }
        .container {            display: grid;            /* 定义网格区域：第一行是header，最后一行是footer，中间一行左边是sidebar，右边是main */            grid-template-areas:                "header header"                "sidebar main"                "footer footer";            /* 定义列：侧边栏200px，主内容区自动填充剩余空间 */            grid-template-columns: 200px 1fr;            /* 定义行：Header和Footer高度固定，中间部分自动填充剩余空间 */            grid-template-rows: 80px 1fr 80px;            height: 100vh;            gap: 10px;            padding: 10px;            box-sizing: border-box;        }        /*grid-area是项目属性，指定项目放在哪一个区域。一般搭配grid-template-area使用 */        .header {            grid-area: header;            background-color: #ff7979;        }
        .sidebar {            grid-area: sidebar;            background-color: #7ed6df;        }
        .main {            grid-area: main;            background-color: #f6e58d;        }
        .footer {            grid-area: footer;            background-color: #badc58;        }
        /* 为所有区域添加统一样式 */        .header, .sidebar, .main, .footer {            padding: 15px;            border-radius: 5px;            color: #333;            font-weight: bold;        }
        /* 响应式设计：当屏幕宽度小于768px时 */        @media (max-width: 768px) {            .container {                /* 改变网格模板：单列布局 */                grid-template-areas:                    "header"                    "sidebar"                    "main"                    "footer";                /* 将列定义改为单列 */                grid-template-columns: 1fr;                /* 行高可以自动调整 */                grid-template-rows: 80px auto auto 80px;            }        }    </style>    <div class="container">        <header class="header">Header</header>        <aside class="sidebar">Sidebar</aside>        <main class="main">Main Content</main>        <footer class="footer">Footer</footer>    </div>

照片墙/瀑布流布局

使用 grid-auto-rows 和 span 关键字创建高度不一的卡片布局。一个不均匀的网格布局，有些卡片较高，有些较矮，形成了类似瀑布流的效果。用grid-auto-rows 设置了基础行高，而 grid-row: span X 让某些项目跨越多个行轨道。repeat(auto-fit, minmax(200px, 1fr)) 确保了布局是响应式的。

<style>        .container {            display: grid;            /* 定义自适应的列：最小200px，最大1fr。auto-fit会自动填充容器 */            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));            /* 设置隐式行的高度为固定的150px */            grid-auto-rows: 150px;            gap: 15px;            padding: 20px;        }
        .item {            background-color: #9b59b6;            border-radius: 8px;            display: flex;            justify-content: center;            align-items: center;            color: white;            font-weight: bold;            font-size: 1.2rem;        }
        /* 通过为不同项目设置不同的行高跨度来模拟瀑布流 */        /* 实际项目中，这个高度可能由图片的实际高度决定，这里用类名模拟 */        .tall {            grid-row: span 2; /* 这个项目占据2行的高度 */            background-color: #e74c3c;        }
        .very-tall {            grid-row: span 3; /* 这个项目占据3行的高度 */            background-color: #34495e;        }
        /* 随机颜色，仅用于演示 */        .item:nth-child(3n) {            background-color: #16a085;        }        .item:nth-child(5n) {            background-color: #f39c12;        }    </style>    <div class="container">        <div class="item">1</div>        <div class="item tall">2 (Tall)</div>        <div class="item">3</div>        <div class="item very-tall">4 (Very Tall)</div>        <div class="item">5</div>        <div class="item tall">6 (Tall)</div>        <div class="item">7</div>        <div class="item">8</div>        <div class="item tall">9 (Tall)</div>        <div class="item">10</div>        <div class="item very-tall">11 (Very Tall)</div>        <div class="item">12</div>    </div>

电商产品卡片

结合Flexbox和Grid，并使用 auto-fit 和 minmax() 实现完全响应式，典型的电商产品列表，Grid布局 (products-grid) 负责外部的响应式网格，会根据容器宽度自动调整每行显示的产品数量（至少250px宽）。每个产品卡片的内部则使用Flexbox进行精细的排版，确保按钮始终位于卡片底部。无需媒体查询即可实现响应式。

<style>        body {            background-color: #ecf0f1;            padding: 20px;            font-family: ;        }
        .products-grid {            display: grid;            /* 魔法所在：自动适应列数，每列最小250px，最大1份额 */            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));            gap: 25px;            max-width: 1200px;            margin: 0 auto;        }
        .product-card {            /* 卡片内部使用Flexbox进行垂直布局 */            display: flex;            flex-direction: column;            background-color: white;            border-radius: 10px;            overflow: hidden;            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);            transition: transform 0.3s ease;        }
        .product-card:hover {            transform: translateY(-5px);        }
        .product-image {            height: 180px;            background-color: #ddd;            /* 模拟图片 */            display: flex;            align-items: center;            justify-content: center;            color: #777;            font-size: 0.9rem;        }
        .product-info {            padding: 20px;            /* 让按钮保持在卡片底部 */            display: flex;            flex-direction: column;            flex-grow: 1;        }
        .product-title {            margin-top: 0;            color: #2c3e50;        }
        .product-price {            color: #e74c3c;            font-size: 1.2rem;            font-weight: bold;            margin: 10px 0;        }
        .product-description {            color: #7f8c8d;            font-size: 0.9rem;            flex-grow: 1; /* 描述文字占据剩余空间，将按钮推到底部 */        }
        .add-to-cart-btn {            background-color: #3498db;            color: white;            border: none;            padding: 10px 15px;            border-radius: 5px;            cursor: pointer;            margin-top: 15px;            font-weight: bold;            transition: background-color 0.2s ease;        }
        .add-to-cart-btn:hover {            background-color: #2980b9;        }    </style>    <div class="products-grid">        <!-- 卡片1 -->        <div class="product-card">            <div class="product-image">产品图片</div>            <div class="product-info">                <h3 class="product-title">优质产品名称</h3>                <p class="product-price">￥199.00</p>                <p class="product-description">这是一段关于这个产品的精彩描述，说明它的特点和优点。</p>                <button class="add-to-cart-btn">加入购物车</button>            </div>        </div>
        <!-- 复制更多卡片以查看网格效果 -->        <div class="product-card">            <div class="product-image">产品图片</div>            <div class="product-info">                <h3 class="product-title">另一个很棒的产品</h3>                <p class="product-price">￥259.00</p>                <p class="product-description">这是另一个产品的描述，可能更长一些，以展示卡片高度的灵活性。</p>                <button class="add-to-cart-btn">加入购物车</button>            </div>        </div>
        <div class="product-card">            <div class="product-image">产品图片</div>            <div class="product-info">                <h3 class="product-title">超级产品三号</h3>                <p class="product-price">￥99.00</p>                <p class="product-description">简洁的描述。</p>                <button class="add-to-cart-btn">加入购物车</button>            </div>        </div>
        <div class="product-card">            <div class="product-image">产品图片</div>            <div class="product-info">                <h3 class="product-title">旗舰产品</h3>                <p class="product-price">￥599.00</p>                <p class="product-description">这是我们最高端的产品，拥有所有你能想到的功能和卓越的性能表现。</p>                <button class="add-to-cart-btn">加入购物车</button>            </div>        </div>    </div>

杂志式不规则布局

使用基于线的定位，让网格项跨越多个行列，创建视觉冲击力强的布局，这个布局打破了整齐的网格，创建了一个视觉重心。最大的「特色文章」区块横跨4列2行，立即吸引用户的注意力。其他文章区块大小不一，交错排列，形成了动态且有趣的杂志或新闻网站首页布局。关键在于使用 grid-column 和 grid-row 并指定起始和结束的网格线来精确控制每个项目的位置和大小。

<style>        .magazine-layout {            display: grid;            /* 定义一个6列的灵活网格 */            grid-template-columns: repeat(6, 1fr);            /* 定义4行，高度自动 */            grid-auto-rows: minmax(150px, auto);            gap: 15px;            max-width: 1200px;            margin: 0 auto;            padding: 20px;        }
        .featured {            /* 占据从第1条线到第5条线（即前4列） */            grid-column: 1 / 5;            /* 占据从第1条线到第3条线（即前2行） */            grid-row: 1 / 3;            background-color: #e74c3c;        }
        .secondary {            /* 占据第5列到最后一列（第7条线） */            grid-column: 5 / 7;            background-color: #3498db;        }
        .tertiary {            /* 占据3列（可根据需要调整起始位置） */            grid-column: span 2;            background-color: #2ecc71;        }
        .tall {            /* 这个项目占据2行 */            grid-row: span 2;            background-color: #f39c12;        }
        /* 通用项目样式 */        .magazine-layout > div {            padding: 20px;            border-radius: 8px;            color: white;            font-weight: bold;            font-size: 1.2rem;            display: flex;            align-items: center;            justify-content: center;        }    </style>    <div class="magazine-layout">        <div class="featured">特色文章 (占据4x2)</div>        <div class="secondary">次要文章 (占据2x1)</div>        <div class="tertiary tall">文章 3 (占据2x2)</div>        <div class="tertiary">文章 4 (占据2x1)</div>        <div class="tertiary">文章 5 (占据2x1)</div>        <div class="tertiary tall">文章 6 (占据2x2)</div>        <div class="tertiary">文章 7 (占据2x1)</div>        <div class="tertiary">文章 8 (占据2x1)</div>    </div>

使用小贴士

浏览器前缀：IE11 需要 -ms-grid 与 -ms-grid-column/row，可 autoprefixer 自动补。
调试：Chrome DevTools → Elements → Layout → Grid Overlay，能直观看到轨道。
降级：老旧浏览器用 @supports not (display:grid){} 回退到 Flex 或浮动。

阅读原文：https://mp.weixin.qq.com/s/Trp31UUbZzMCdb76TSkzFw

该文章在 2025/9/22 15:31:28 编辑过

关键字查询

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。