iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
自我挑戰組

前進切版之路! CSS微體驗系列 第 14

【心得】你今天種菜了嗎? grid之路-grid的使用(6)

畫欄位線條時我們都要計算要畫幾條線以及每一格的大小,以便接下來完美的將物件填入格子裡
像是:

grid-template-columns: repeat(5,20%);
 grid-template-areas: 
    "black1 black1 black2 black3"
    "black1 black1 black4 black5";

除此之外,grid還可以透過 auto-fill 根據設定的寬度自動排出線條數量

grid-template-columns: repeat(auto-fill, 110px);

在父層空間500px的情況下,每一格寬110px的情況

在父層空間500px的情況下,每一格寬150px的情況

在使用auto-fill會發現如果父層寬度不能被每一格的寬度整除時,總是會有剩餘空間出現(|||゚д゚)

這時候就可以出動 minmax 來彈性設定格寬了~

minmax(min, max)

原則上它會以max值來填滿父層
可當min值>max值時,後面的那個max值會被忽略掉(然後就有可能會壞掉XD)
且如果父層的寬度小於設定的min值時,裡面的物件會直接突出父層
這樣說有點難理解~
假設設定

max-width: 500px;
min-width: 100px;

grid-template-columns: repeat(auto-fill, minmax(150px,250px));

在父層空間大於250px(最大值)之前都會以max值來填滿空間

當父層空間小於250px(最大值)時,開始進行彈性縮放

達到設定的最小值後就不再縮放

這個時候如果父層的寬度小於設定的min值時,裡面的物件會直接突出父層

-->實作codepen

RWD的應用上,在max最大值的地方搭配使用 fr 使用,即便更改父層寬度,或是更改子層的最大/最小寬度,都可以自動填滿父層

 grid-template-columns: repeat(auto-fill, minmax(110px,1fr));

這樣在RWD上會自由很多呢

參考資料:
https://www.smashingmagazine.com/2018/04/best-practices-grid-layout/
https://www.smashingmagazine.com/2017/09/css-grid-gotchas-stumbling-blocks/
https://developer.mozilla.org/en-US/docs/Web/CSS/minmax()
https://www.hongkiat.com/blog/css-grid-layout-minmax/


上一篇
【心得】你今天種菜了嗎? grid之路-grid的使用(5)
下一篇
【踩坑】為什麼a標籤沒有包住我要的範圍!?
系列文
前進切版之路! CSS微體驗30

尚未有邦友留言

立即登入留言