---
# System prepended metadata

title: 'Ggid system格線系統研究:'
tags: [css, grid]

---

###### 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>指定定位。
    
![](https://i.imgur.com/0Q3OC6x.png)
    
<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)

    
    
    