2019年8月11日 星期日

[Back To Basic] CSS Grid Layout

Grid Layout

不需要 float 和 positioning 也可排版。

Grid Elements

包含一個父元素(parent element)和多個子元素(child elements)。

Step1. 設定Grid顯示

display: grid;
display: inline-grid;

Step2. 設定屬性

  • 設定Gap
    • grid-column-gap: 20px;
    • grid-row-gap: 20px;
    • grid-gap: 20px;
  • 設定lines(跨欄)
    •   grid-column-start: 1;
    •   grid-column-end: 3;
    •   grid-row-start: 2;
    •   grid-row-end: 4;

沒有留言:

張貼留言