DAY23 搞样式--CSS Gird小进阶（间隔/fr）

间隔

有了布局跟对齐功能之後，现在我们要来了解如何设置行与行/栏与栏之间的间隔罗。

下图是没有间隔的状况，可以看到20个元件（item）满满的占据了整个容器（Container）

那要如何取出间隔呢？很简单

• column-gap 来设置栏与栏间隔

.container{
    column-gap: 10px;
}

我设置每个栏位之间要间隔10px

就可以看到图片上的成果了，可以看到栏与栏之间都取出了10px的间隔

• row-gap 来设置行与行间隔

.container{
    row-gap: 10px;
}

我设置每行之间要间隔 10px

就可以看到图片上的成果了，可以看到行与行之间都取出了 10px 的间隔

你可能会想说，如果行跟栏都要设间隔的话，是不是又要打两行？真麻烦！
没问题，懒人包又来了

• 使用 gap 缩写

.container{
    gap: 10px 10px;
    /* <grid-row-gap> <grid-column-gap> */
}

我们可以直接用 gap 缩写，第一个值为行间距，第二个值为栏间距。
如果向上面这样，两个值相同的话，也可以只写一个值就可以罗，像这样：

.container{
    gap: 10px;
}

上面这两个缩写范例，呈现出来就跟下面这个是一样的意思

.container{
    column-gap: 10px;
    row-gap: 10px;
}

fr是什麽？

今天要提到一个比较特殊的东西，就是 fr，fr是一种单位，是用来将剩余的空间依照比例分配使用的
我们直接用范例来看看

今天这个容器（Container）我们给他写死了 500px 乘 500px 的宽高
目前是等比例分成 5 乘 4 的共 20 个元件（item）的区块

目前的程序码如下：

.container {
  width: 500px;
  height: 500px;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 25% 25% 25% 25%;
}

那我们开始尝试使用 fr 这个单位看看

.container {
  grid-template-columns: 1fr 20% 20% 20% 3fr;
}

我们将第一栏改成 1fr、第五栏改成 3fr，看看会发生什麽事情？

哇，可以看到第一栏变窄了，而第五栏变宽了呢！
那到底发生什麽事情呢？

grid-template-columns: 1fr 20% 20% 20% 3fr
以这段而言，我们将栏位一样拆成五块，中间三块(2、3、4)共占据了 20% 乘以 3 = 60% 的位置
100% - 60% = 40%，可以看到我们剩余的位置是 40% 了
使用 fr 便会将剩余的空间依照比例分配，也就是剩下那 40% 的部分会依照fr的比例做分配

因为我们第一栏改成 1fr、第五栏改成 3fr，总共有 4fr
第一栏的空间就是 1/4，(在 4fr 中占据 1fr)
第五栏的空间就是 3/4，(在 4fr 中占据 3fr)

所以结果就会是，剩下的 40% 空间
分给第一栏 40% 乘以 1/4
分给第五栏 40% 乘以 3/4

以上就是今天的补充说明，感谢各位的观看～我们明天见