4 合并grid列_grid布局笔记3——row-gap、 column-gap和 gap

grid布局可以设置行与行之间的间距(行间距)和列与列之间的间距(列间距)。在flex布局或者div+css的布局，想要得到相同的效果通常要设置外边距(在设置外边距还要考虑很多问题)。这是grid布局很亮眼的一点。

grid-row-gap设置行间距，grid-column-gap设置列间距。简单设置就可以得到一个美观的布局效果。

.container{ display: grid; width:500px; grid-template-columns: repeat(3,100px); grid-template-rows: repeat(3,100px); background-color:rgb(25 202 173); grid-column-gap: 5px; grid-row-gap: 5px;}.item{ display:flex; justify-content: center; align-items: center; font-size: 50px; color:rgb(244 96 108);}

html代码如下

1

2

3

4

5

6

7

8

9

效果图就是一个漂亮的九宫格

grid-gap是 grid-row-gap和grid-column-gap的合并简写模式，它可以有两个值，第一个就是grid-row-gap的值，第二个就是grid-column-gap的值，就是说grid-gap：5px 10px；这一句代码等同于grid-row-gap：5px；grid-column-gap：10px；如果忽略了第二个值，浏览器就会默认第二个值和第一个值相等。

根据最新的标准，上面的三个属性名grid-前缀已经删除了，就是说grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap。所以我们的标题就是删除grid-前缀的三个属性。(如果你按旧的属性编写仍然有效，但最好使用新的标准。)

好了，就写那么多，一次了解一点点。