css网格布局Grid

一、网格布局适应场景

当涉及到的布局是二维布局(元素不止一行或者一列)且比较复杂的时候,可以用网格布局,看下面的一个例子:

上图上一个四行三列的网格,布局相对比较复杂。如果你用别的布局方案,例如:绝对定位,flex,float等等,实现起来都很麻烦,但是你用了网格布局,情况就好多了。文章最后会附上上面示例的代码。

二、关键属性详解

1. 容器属性

属性 作用 示例
display: grid 启用网格布局 .container { display: grid; }
grid-template-columns 定义列的轨道大小(支持固定值、百分比、fr 单位、minmax() 等) grid-template-columns: 100px 1fr 2fr;
grid-template-rows 定义行的轨道大小 grid-template-rows: repeat(3, 100px);
gap 设置行和列的间距(兼容旧版需用 grid-row-gapgrid-column-gap .container { gap: 10px; }
grid-template-areas 通过命名区域定义布局 grid-template-areas: "header header" "sidebar main";
grid-auto-flow 控制自动放置算法(row/column/dense grid-auto-flow: column dense;

2. 网格项属性

属性 作用 示例
grid-column 定义网格项的列范围(起始线/结束线或 span 跨度) grid-column: 2 / span 3;(从第2列跨越3列)
grid-row 定义网格项的行范围 grid-row: 1 / 3;(从第1行跨越2行)
grid-area 简写属性,合并 grid-rowgrid-column,或直接引用命名区域 grid-area: header;(分配到命名区域)
justify-self 控制网格项在单元格内的水平对齐方式 justify-self: end;
align-self 控制网格项在单元格内的垂直对齐方式 align-self: center;

三、常见布局场景

1. 基础网格

css 复制代码
.container {

display: grid;

grid-template-columns: repeat(3, 1fr); /* 3列等宽 */

grid-template-rows: repeat(2, 100px); /* 2行,每行100px */

gap: 10px;

}

效果:3列×2行的网格,所有单元格大小相同。

2. 跨行/跨列

css 复制代码
.item-span {
grid-column: 2 / 4; /* 跨越第2、3列 */
grid-row: 1 / 3; /* 跨越第1、2行 */
}

效果:一个网格项占据2行×2列的区域。

3. 命名网格区域

css 复制代码
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}


.header { grid-area: header; }
.sidebar { grid-area: sidebar; }

效果:通过名称直观分配布局区域。

4. 响应式网格

css 复制代码
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

效果:自动填充容器宽度,每列最小200px,剩余空间均分。


四、与 Flexbox 的对比

特性 Grid Layout Flexbox
维度 二维布局(行+列) 一维布局(行或列)
适用场景 复杂页面结构(如仪表盘、表格) 一维布局(如导航栏、卡片组)
对齐控制 支持单元格内和单元格间的对齐 仅支持容器内子项的对齐
嵌套复杂度 减少嵌套,直接定义二维结构 可能需要多层嵌套实现复杂布局

五、第一部分示例代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container {
            width: 80%;
            height: 60vh;
            background-color: pink;
            padding: 2px;
            display: grid;
            row-gap: 2px;
            column-gap:5px;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(4, 1fr)
        }

        .item {
            border: 1px solid #000;
        }

        .one {
            background-color: blue;
            grid-column: 2 / span 2;
        }
        .two {
            background-color: red;
            grid-column: 3;
            grid-row: 2 / span 2;
        }
        .three {
            background-color: green;
            grid-column: 1 / span 2;
            grid-row: 1 / span 2;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item three">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 two">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <!-- <div class="item">9</div> -->
        <div class="item">10</div>
        <div class="item one">11</div>
        <!-- <div class="item">12</div> -->
    </div>
</body>
</html>
相关推荐
代码的余温3 小时前
CSS3文本阴影特效全攻略
前端·css·css3
每天开心3 小时前
告别样式冲突:CSS 模块化实战
前端·css·代码规范
3Katrina8 小时前
我仿造了一个掘金App的首页...
前端·css
伍哥的传说20 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
结城1 天前
深入掌握CSS Grid布局:每个属性详解与实战示例
前端·css
寒..1 天前
网络安全第三次作业
前端·css·html
小白阿龙1 天前
如何实现缓存音频功能(App端详解)
前端·css·html5
smile boy1 天前
个人财务记录应用
前端·javascript·css·css3·html5
FogLetter2 天前
从零复刻网易云音乐年度总结H5:技术细节与用户体验的完美结合
前端·css
前端老鹰2 天前
CSS mask-image:给元素 “戴” 上创意面具的隐藏技巧
前端·css