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;
沒有留言:
張貼留言