###### tags: `css` `grid`

# Ggid system格線系統研究:
## grid-template-rows&columns/grid-column-start&end/grid-row-start&end/grid-area

### 1.grid-template-columns & rows

一直有耳聞Grid System可以做很彈性排版，但一直沒有認真撥空研究，過往都是使用boostrap 12等份column系統，雖然可以應付大部分情境，但如果要追求精準效果就不是很完美工具，這次真的要認真研究應用

看了一些資料寫法大多是

<div class="wrapper">
    <div class="box a"></div>
    <div class="box b"></div>
    <div class="box c"></div>
</div>

我的理解是外層的<kbd>wrapper</kbd>指的<kbd>grid-template-columns:3</kbd>意思是三個區塊。內層的<Kbd>b</Kbd>裡面的<kbd>grid-template-columns:2 / 3</kbd>意旨佔位子從左數過來第二到三位子。wrapper有三個區塊會有四條格線。


### 1-2 b方塊正確寫法 - 1

此寫法是指定**格線**方式來劃分正確位置

.wrapper{
display: grid;
    grid-gap: 10px;
    grid-template-columns: 3;
    grid-template-rows: 2;
}


.box{
background-color: #620ECE;
color: #fff;

}

.b {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

### 1-3 grid-column-start/end & grid-row-start&end
### b方塊正確寫法 - 2
承上b方塊正確寫法，另一種寫法

由下可以得知<kbd>grid-column-start/end & grid-row-start&end</kbd>是指定**格線**位置方法

.b {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
  }

### 1-4 grid-area
### b方塊正確寫法 - 3

<kbd>grid-area</kbd>是使用指定**格線**方式來劃分位子

逆時鐘方式由上到下數一圈:

 .b {
    grid-area: row-start/column-start/row-end/column-end;
  }
  


意思就是

.b {
grid-area: 1 / 2 / 2 / 3;
}

### 1-5 使用以上1-2~1-3三種寫法寫出以下畫面

<iframe height="300" style="width: 100%;" scrolling="no" title="grid-template-rows&amp;columns" src="https://codepen.io/corly74/embed/NWzEjLN?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/corly74/pen/NWzEjLN">
grid-template-rows&amp;columns</a> by peiyun (<a href="https://codepen.io/corly74">@corly74</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### 1-6 使用以上1-2~1-3三種寫法寫出以下畫面

<iframe height="300" style="width: 100%;" scrolling="no" title="grid-template-rows&amp;columns-Intermediate" src="https://codepen.io/corly74/embed/poKqrgx?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/corly74/pen/poKqrgx">
grid-template-rows&amp;columns-Intermediate</a> by peiyun (<a href="https://codepen.io/corly74">@corly74</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

#### 參考資料
[Grid by Example](https://gridbyexample.com/examples/)