• 首页
  • 10分鐘理解CSS3 Grid布局，進階學習資料

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

《 100天的默契