CSS - 初步了解 CSS Gird - 使用 repeat() 製作 RWD

發表於 | 分類於

前言

前面我們了解怎麼使用 grid-template-columns, grid-template-rows 設定欄列，但是如果你有很多重複的欄列呢?

repeat()

原本我們設定欄列是這樣

1
grid-template-columns: 50px 200px 20% 50px 200px 20%;

或者

1
grid-auto-columns:30px;

但以上面方式假如你有很多欄寬但是欄寬不一樣但是又有許多重複的呢?你就會變成

1
grid-template-columns: 50px 200px 20% 50px 200px 20% 50px 200px 20% 50px 200px 20% 50px 200px 20% 50px 200px 20%;

這樣豈不是太長了又難維護

所以這時我們就要使用 repeat()，把上面又長又臭的欄寬改成

1
grid-template-columns: repeat(6,50px 200px 20%); /* 一行內要重複幾次，後面則是欄位寬   */

意思就是，第一個是行內想重複幾次，後面則帶入想要重複的寬度，是不是變得簡單又明瞭惹~

另外 repeat() 可以多用，例如前面重複一樣，後面是另外的重複的就可以寫成

1
grid-template-columns: repeat(2,70px 30px) repeat(2,100px);

還有如果說其中有不想重複的也可以插入進去

1
grid-template-columns: repeat(2,70px 30px) 150px repeat(3,100px) auto;

重複的數量不確定

前面都是自己設定要重複的數量，若是不知道數量的情況下，這時就可以使用 auto-fit, auto-fill 自動填滿

  • auto-fill
    會根據 grid 子層寬度自動計算需要填充的數量，若父層寬度大於子層許多的話，就會產生隱藏的欄位
  • auto-fit
    和 auto-fill 類似，視覺上的效果是會將原本欄位內的子層寬度都平均拉長，但實際上還是有新增欄位數，只是被摺疊起來了

差別:

Codepen 來自[CSS-Tricks](https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/)

minmax()

除了 repeat() 能重複欄位不用自行設定之外，製作成 RWD 的另外大功成就是 minmax()，用來設定最大值與最小值

使用 RWD 就是希望能跟著螢幕大小縮放並且滿版的時不要有空白處，所以我們就能設定成 minmax(100px,1fr)，意思就是最小寬度是 100px，而最大寬度則是自動1等分

1
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

範例:

grid-auto-flow

使用過 flex 的知道 flex-direction 這個屬性吧，用來控制排序要水平的還是垂直，grid-auto-flow 也是一樣

1
2
3
4
5
grid-auto-flow: row;
grid-auto-flow: column;
grid-auto-flow: dense;
grid-auto-flow: row dense;
grid-auto-flow: column dense;

grid 最初默認值是垂直排列 row，當你設定的 template 排完後，接著就會往下一行排列，所以說如果是水平排列的話(先從上往下排列好後，往旁邊繼續排列)就要改成 grid-auto-flow: column;

還記得我們 grid 是可以設定欄寬列高嗎，假如你的欄寬列高超過 template 的設定，grid 就會自動幫你往下一行，這樣就會產生空白欄位，這邊我們就可以使用 dense : 利用其他合的欄寬補足空白，以下範例就能發現第五格原本該往下排，但使用了 dense 所以自動補足上面的空白了

用上面的方法，就能做出漂亮的 RWD 了//，最後來個 RWD 排版 ~

結論

只要能掌握 gird 的規則，其實就不難，我也還在摸索XD
希望大家都能做出自己喜歡的 RWD 排版//

參考文獻

CSS GRID / CSS格線好好玩【完整版】 | CSS教學 | CSS格線
CSS repeat()函數詳細介紹
A Complete Guide to Grid
Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit