CSS網格佈局 RWD運用 display: grid

2021 年 2 月 8 日

Rwd佈局中常會出現網頁版是顯示較多行一列，手機版則顯示較少行的畫面需求。
此時就會運用到display: grid這個屬性

以下範例為螢幕大於767px時3行一列，小於時顯示2行一列

html

<ul class="boxList">
 <li>第一列-1</li>
 <li>第一列-2</li>
 <li>第一列-3</li>
 <li>第二列-1</li>
 <li>第二列-2</li>
 <li>第二列-3</li>
</ul>

css

.boxList{
 display: grid;
 grid-gap: 20px 10px; /* 間距 */
}

@media (max-width: 767px){
.boxList{
 grid-template-columns: 1fr 1fr;  /*-多少個fr就有幾列-*/
}
}
@media (min-width: 768px){
.boxList{
 grid-template-columns: 1fr 1fr 1fr;
}
}

Fr的用途為切分橫向比例
grid-template-columns: 1fr 3fr 1fr;
一行的寬度就會被分成 1:3:1 的比例

CssCSS

Shiro