本文详细介绍了CSS Grid布局的概念，包括容器、项目、行和列、单元格和网格线的基本概念。接着讲解如何定义网格容器，如设置行和列、使用repeat()函数、比例填充fr单位，以及自动长度和minmax()函数。此外，还涉及了网格间距的设定和项目摆放顺序的控制。通过实例展示了Grid布局的强大和灵活性。
我疏忽了，忘记把这几章节放在布局那边了，不过后来想想还是独立成章更好一点，所以在进阶样式中间插入几个章节，叫做网格布局。
网格布局，即 grid 布局，虽然有不少人都说它是“最强大”的布局方案，但我认为没有哪一种一定比另一种强的说法，只有在什么时候适合用什么布局，目前如果真的是从零开始了解 CSS 的话，我还是觉得弹性盒子 display: flex; 这种更加直观，所以优先介绍了——正好自己重新学一次挺好的。
不过，不可否认的是，网格布局的确在很多时候是优于弹性盒子布局的，因为：
- flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局
- grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局
所以接下来就看看网格布局到底有多强大（很多内容参考自阮一峰老师的博客：CSS Grid 网格布局教程，如果有兴趣可以看看原文）。
1 概念
CSS 3 引入网格布局，是一次大革新，它把网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了，如下例（非常简单）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello</title>
<style>
.container {
width: 600px;
height: 600px;
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 33% 33% 33%;
}
.item {
border: thin solid black;
text-align: center;
font-size: 64px;
color: white;
line-height: 200px;
}
#div1 {
background: red;
}
#div2 {
background: orange;
}
#div3 {
background: yellow;
}
#div4 {
background: green;
}
#div5 {
background: blue;
}
#div6 {
background: aqua;
}
#div7 {
background: purple;
}
#div8 {
background: brown;
}
#div9 {
background: grey;
}
</style>
</head>
<body>
<div class="container">
<div class="item" id="div1">1</div>
<div class="item" id="div2">2</div>
<div class="item" id="div3">3</div>
<div class="item" id="div4">4</div>
<div class="item" id="div5">5</div>
<div class="item" id="div6">6</div>
<div class="item" id="div7">7</div>
<div class="item" id="div8">8</div>
<div class="item" id="div9">9</div>
</div>
</body>
</html>
接下来我们可以来看看网格布局的一些基础概念先：
1.1 容器和项目
采用网格布局的区域，称为容器（container），容器内部采用网格定位的子元素，称为项目（item），比如上面例子里面的 div：
<div class="container">
<div class="item" id="div1">1</div>
<div class="item" id="div2">2</div>
<div
最低0.47元/天 解锁文章
555
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
