iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Modern Web

30天搞定CSS及切版系列 第 14

CSS display:grid

Gird是一種二維的布局方式,相較flex來說grid還多控制了列~

example :

<div class="wrapper">
   <div class="item">One</div>
   <div class="item" >Two</div>
   <div class="item">Three</div>
   <div class="item">Four</div>
   <div class="item">Five</div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows : 100px 50px;
  gap:3px;
}
.item
{
  border:1px solid black;
}

grid-template-columns

決定有多少欄,每一欄的寬度為多少
除了可設定px外還有其他寬度選項

==fr== : 根據剩餘的寬度決定占多少百分比

==repeat(3, 200px)== : repeat(重複次數,寬度)

==minmax(100px,1fr)== minmax(最小值,最大值),寬度最小會等於最小值,最大只會等於最大值。

==auto== 撐滿剩下的空間。

grid-template-rows

決定有多少列,使用參數與columns一樣~

gap

元素與元素間的間隔,有點類似margin的感覺,但仔細觀察grid-item不會推開container本身。


上一篇
CSS垂直置中
下一篇
CSS display:Grid
系列文
30天搞定CSS及切版16

尚未有邦友留言

立即登入留言