[TOC]
>[success] # grid布局
我们在开发中，如果想实现像上面的这种 **一行指定个数盒子 ，超过指定个数换行** ，写起来很麻烦，如果用 **浮动布局** 还要 **计算每个盒子左右** 的 **margin 间距** ，用 **flex布局** 还无法实现 **每行指定个数元素，超出个数换行的布局** ，然而这一切用 **grid 布局很好实现** ，下面使用 **grid布局** 来是实现一下：
**index.html**
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<style>
.box {
display: grid;
/* fr是grid专有得写法 */
/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; */
/* 等同上面的写法 */
grid-template-columns: repeat(6, 1fr);
/* 列间距(每列左右的间距) */
/* column-gap: 12px; */
/* 行间距(每行上下的间距) */
/* row-gap: 12px; */
/* 简写 */
gap: 12px;
}
.box div {
background-color: red;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
</body>
</html>
~~~
也就是说只需要这 **3行代码** 就可以实现
~~~
display: grid; // 启用grid布局
grid-template-columns: repeat(6, 1fr); // 每行展示6个盒子，每个盒子的距离是1fr，这个fr是grid的单位，跟 flex 布局的 flex:1有点相似
gap: 12px; // 每个盒子的 margin 间距
~~~
