【Day14】比Flex更方便的排版屬性!? - Grid

15th鐵人賽

卡羅奇奇

2023-09-29 22:51:05

558 瀏覽

分享至

Grid

grid支援度:Can I Use)

在還沒學會grid以前，排版都會使用flex，有了grid可以解決很多很特別的排版，讓我們來看看吧~

grid是什麼?

grid是CSS中一種格線佈局模式，可以用來寫複雜且可響應式的佈局。
grid將網頁分為一組水平和垂直的線，稱為軌道 (track)。元素可以放置在這些軌道中，形成網格。
可以給各軌道指定的大小，像是pixel、%，甚至是新的單位fr，fr就是為了格線布局而生。
可以更方便產出複雜佈局，如瀑布流佈局。

如要開始試試看grid，需先將dispaly設定為grid / inline-grid。

display:grid;

屬性	介紹
`grid-template-columns`	指定網格的列數和寬度，也可以使用`minmax(min,max)`控制區塊最小值最大值。
`grid-template-rows`	指定網格的行數和高度，也可以使用`minmax(min,max)`控制區塊最小值最大值。
`grid-template-areas`	可以單獨定義每一格，但區塊要連續，且使用`.`可以代表空白區塊。
`grid-column-start` ， `grid-column-end`	指定元素在列中的起始位置和結束位置；可以簡寫為`grid-column:start / end`，也可以使用 `span <number>`代表佔了幾個欄位(span)。
`grid-row-start`,`grid-row-end`	指定元素在行中的起始位置和結束位置；可以簡寫為`grid-row:start / end`，也可以使用 `span <number>`代表佔了幾行(span)。
`grid-area`	`grid-column`+`grid-row`的簡寫，`row start/column start/row end/column end`。
`grid-auto-rows`	適用於每列高度一樣的排列，只要設定高度，就可以自動套用於每一列。
`grid-auto-columns`	適用於每行寬度一樣的排列，只要設定寬度，就可以自動套用於每一行。
`grid-auto-flow`	資料流動排列的方向，有`columns`和`row`兩個值，預設值是`row`。
`grid-row-gap`,`grid-column-gap`	行和行與列和列的間距，也可以簡寫為`grid-gap`。

像是昨天介紹flex-gap範例，試著用grid寫寫看:

#app{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(3,1fr);
}

比flex更輕鬆的是可以利用grid的新單位fr，搭配repeat()就不用特別去設定子元素的寬度~

來示範一個常見的layout

.layout{
  width:100%;
  height:100%;
  display:grid;
  grid-gap:5px;
  grid-template-columns: 200px auto;
  grid-template-rows: 60px auto;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "sidebar content content";
}
header{
  background:pink;
  grid-area:header;
}
aside{
  background:red;
  grid-area:sidebar;
}
section{
  background:green;
  grid-area:content;
}