10分鐘理解CSS3 Grid布局,進階學習資料

mb61303fea4e60c 2021-09-19 10:37:10 阅读数:280

理解 css3 css grid 布局

(2) fr(fraction)

css3中引入了一個新的單比特fr(fraction),中文意思為“分數”,用於替代百分比,因為百分比(小數)存在除不盡的情况,用分數錶示可以避免多比特小數的寫法。比如三列等寬的grid可以錶示為:


grid-template-columns: repeat(3, 1fr);

  • 1.
  • 2.
  • 3.

(3) repeat

我們也可以用repeat方法來簡化column或者row的寫法,repeat方法接受兩個參數,第一個參數錶示重複的次數,第二個參數錶示重複的內容。所以,三列等寬的grid我們還可以錶示為:


`grid-template-columns:` `repeat``(``3``,` `1``fr);`

  • 1.
  • 2.
  • 3.

當我們要定義的列數很多時,repeat就會變得非常有用,比如我們要定義一個10列等寬的grid,可以寫成repeat(10, 1fr),而不用將1fr重複書寫10遍。

2. Row

(1) 設置row

當我們設置column之後,row會因為元素的換行而自動產生,但是我們依然可以設置row的個數和高度。

css:


`#content{`
`display``: grid;`
`grid-template-columns:` `repeat``(``3``,` `1``fr);`
`grid-template-rows:` `repeat``(``4``,` `60px``);`
`max-width``:` `960px``;`
`}`

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

效果:

10分鐘理解CSS3 Grid布局,進階學習資料_程序員

可以看到,雖然第四行沒有內容,但是row確實存在並占據了那部分空間。

(2) minmax

上面的例子中我們給了row一個固定高度,這導致一個問題:如果某個grid item中的內容特別多,受制於固定的高度,部分內容將無法顯示,如下圖:

10分鐘理解CSS3 Grid布局,進階學習資料_Web_02

為解决這個問題,css提供了minmax函數,讓我們可以設置row的最小高度和最大高度,最大高度取auto後便可以讓row的高度自適應:

css:


`grid-auto-rows: minmax(``60px``,` `auto``);`
`// 或者`
`grid-template-rows:` `repeat``(``3``, minmax(``60px``,` `auto``));`

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

效果:

10分鐘理解CSS3 Grid布局,進階學習資料_前端_03

(3) grid gap

如果我們想給行和列之間加上間隔,也有現成的方法:

css:


`grid-gap:{`
`10px``;`
`}`

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

效果:

![](

)

3. Grid Line

以上所有例子中,grid中的每個grid item都是按默認順序排列的。如果我們想重新布局改變grid item的比特置或大小呢?為此引入了grid lines的概念,所謂的grid lines就是將grid若幹等分後的分割線,如下圖中橫向和縱向序號1~8的線即為grid lines:


`<``img` `src="[http://lc-jOYHMCEn.cn-n1.lcfi...;/](
)>`

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

通過定義grid item的起始和結束的grid line我們就可以實現對grid item比特置和覆蓋面積的控制。一個簡單的例子:

html:


<div id="content">
<div class="one">1</div>
</div>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.

css:


#content {
display: grid;
grid-template-columns: repeat(8, 100px);
grid-template-rows: repeat(8, 100px);
grid-gap: 10px;
}
.one {
grid-column-start: 3;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 6;
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.

效果:

10分鐘理解CSS3 Grid布局,進階學習資料_前端_04

通過設置grid-column-start/end grid-row-start/end 相當於給grid item設置起始坐標和結束坐標,上面的css也可以簡寫為:


.one {
grid-column: 3 / 6;
grid-row: 3 / 6;
}
// 或者
.one {
grid-area: 3 / 3 / 6 / 6;
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.

如果grid item的起始grid line為默認,我們可以只設置它的跨度(span):


.one{
grid-column: span 3;
grid-row: span 3;
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

4. Grid Area Template

除了通過grid lines進行布局,css3提供了一種更牛逼的布局方式:grid area template。與其用語言解釋什麼是grid area template,不如直接看代碼:

html:


<div id="content">
<header>Header</header>
<main>Main</main>
<section>Section</section>
<aside>Aside</aside>
<nav>Nav</nav>
<footer>Footer</footer>
</div>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.

css:


body {
color: #fff;
text-align: center;
}
#content {
display: grid;
### 最後
如果你已經下定决心要轉行做編程行業,在最開始的時候就要對自己的學習有一個基本的規劃,還要對這個行業的技術需求有一個基本的了解。有一個已就業為目的的學習目標,然後為之努力,堅持到底。如果你有幸看到這篇文章,希望對你有所幫助,祝你轉行成功。
**[CodeChina開源項目:【大廠前端面試題解析+核心總結學習筆記+真實項目實戰+最新講解視頻】](https://ali1024.coding.net/public/P7/Web/git)**
![10分鐘理解CSS3 Grid布局,進階學習資料_前端_05](https://s3.51cto.com/images/20210919/1632018356557659.jpg)
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
版权声明:本文为[mb61303fea4e60c]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/09/20210919103709934y.html