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

# Ggid system格線系統研究:

## minmax(<min>, <max>)、fr(等份)

### 1.1 fr 基礎應用

<kbd>fr</kbd>意思是等份 :

.wrapper{
    
grid-template-columns: 1fr 1fr 1fr 1fr;
<!-- 等於 -->
grid-template-columns: 25% 25% 25% 25%;
    
    }

### 1.2 fr 基礎範例

請問<kbd>fr</kbd>寫出以下畫面。

註:不含虛線，虛線為說明<kbd>grid-template-columns</kbd>和<kbd>grid-template-rows</kbd>像是在畫面上畫了虛擬虛線，再搭配內層的<kbd>grid-column</kbd>與<kbd>grid-row</kbd>指定定位。


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

<div class="wrapper">
  <div class="fr-1">
    <div class="fr-1-6">
        1
      </div>
    </div>
</div>
    
.wrapper{
  border-radius: 5px;
  padding:1rem;
  background-color: #620ece;
}

.fr-1{
    gap: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows:100px 100px 100px 100px;
    color: #fff;
    font-size: 150%;
    text-align: center;
 
}
    
.fr-1-6{
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  background-color: #fbe30b;
  color: #16cbaa !important;
  border-radius: 5px;
  padding: 20px;
  
}
    

2.1 fr 進階應用

 grid-template-columns: 3fr 5fr 2fr ;
 grid-template-rows:1fr 4fr;

每一個columns和row佔份額為多少呢 ?
計算式如下:

3fr+5fr+2fr=10fr;
columns被切為10等份，3/10、5/10、2/10;
    
1fr+4fr=5fr;
rows被切為5等份 ，1/5、4/5;
    
結果為:
grid-template-columns: 30% 50% 20% ;
grid-template-rows:20% 80%;

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

### 參考資料
[[Day19] grid-template 屬性之 rows/columns](https://ithelp.ithome.com.tw/articles/10248418)