[HTML/CSS]colum-gap屬性

屬性定義及使用說明

column-gap的屬性指定的列之間的差距。

註意： 如果指定了列之間的距離規則，它會取平均值。

語法

Flex layout(存在相容性問題)

HTML

1 <div id="flexbox">
2   <div></div>
3   <div></div>
4   <div></div>
5 </div>

CSS

#flexbox {
  display: flex;
  height: 100px;
  column-gap: 20px;
}
#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: auto;
}

Result

Grid layout(存在相容性問題)

HTML

1 <div id="grid">
2   <div></div>
3   <div></div>
4   <div></div>
5 </div>

CSS

 1 #grid {
 2   display: grid;
 3   height: 100px;
 4   grid-template-columns: repeat(3, 1fr);
 5   grid-template-rows: 100px;
 6   column-gap: 20px;
 7 }
 8 
 9 #grid > div {
10   border: 1px solid green;
11   background-color: lime;
12 }

Result

Multi-column layout

HTML

1 <p class="content-box">女流直播和解說的游戲不同於國內常見的流行游戲，以優秀的獨立游戲和極具藝術性富含哲理的頂尖大作為主。獨立游戲的走向相對地取決於開發者，他們可以做自己想做的游戲而不受限制，所以這類游戲往往帶有作者的態度和表達。這類游戲不同於聲勢浩大的大型游戲，卻總能給人帶來出乎意料的驚喜。</p>

CSS

1 .content-box {
2   column-count: 3;
3   column-gap: 40px;
4 }

Result