SS Grid 網(wǎng)格布局可以將包裹元素任意組合成不同的網(wǎng)格，進(jìn)而快速、便捷的對頁面結(jié)構(gòu)進(jìn)行布局，提高工作效率。當(dāng)然了，每一種布局方法都有各自優(yōu)勢，所以，我們無需糾結(jié)使用什么方法，而是在什么條件下使用什么方法。目的只有一個，高效、便捷。

新的方法與屬性的產(chǎn)生只會讓我們更為快速、便捷地處理當(dāng)前需求；我們在一定的條件下，使用合理的方法，進(jìn)而高效、便捷地完成任務(wù)。

網(wǎng)頁布局這是創(chuàng)建web頁面的基礎(chǔ)結(jié)構(gòu)操作，對于當(dāng)下市場上N多種UI封裝包共享，一定程度上我們很少操作HTML及其CSS相關(guān)工作，更多的前端工程師們精力放在了JavaScript（及其相關(guān)框架），這也是正常現(xiàn)象，同時也因"環(huán)境"而定。

不多廢話，一起看看CSS中的Grid布局方法，或許以后有用。以前看到過，屬性太多，沒怎么看，今天休假，索性心靜下來慢慢看。

Web頁面結(jié)構(gòu)布局是創(chuàng)建新頁面的基礎(chǔ)，它是數(shù)據(jù)信息呈現(xiàn)的骨架，方法很多，無論用什么方法，我們最終呈現(xiàn)出來的結(jié)果都一樣，當(dāng)然了，這是對于用戶而言，用戶不會看你的頁面結(jié)構(gòu)是如何布局，用什么方法；他們更多在意的是視覺以及數(shù)據(jù)呈現(xiàn)結(jié)構(gòu)是否符合自己的瀏覽習(xí)慣。而身為前端開發(fā)者???而言，關(guān)注的是，能否快速實現(xiàn)效果，能否可擴(kuò)展亦或便于二次修改。

CSS Grid網(wǎng)格布局

由于其屬性相對比較多，所以我們由簡至繁去了解，不然急性子真看不下去?。

一、HTML結(jié)構(gòu)層（父元素與子元素）

創(chuàng)建一個640寬度的ul->li結(jié)構(gòu)

CSS Grid網(wǎng)格布局

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

// UL
width:640px;
display: grid;
grid-template: 1fr 1fr/1fr 1fr;
// LI

我們通過父容器display:grid聲明后，那么其下子元素則聽從其父的安排，怎么感覺跟人一樣?，讓你往東你不能往西...

示例中grid-template是一種簡寫，即：grid-template-rows 與 grid-template-columns

grid-template: auto 1fr / auto 1fr auto;
// 等同與
grid-template-rows: auto 1fr;
grid-template-columns: auto 1fr auto;
grid-template-areas: none;

是行與列的一種分配方式，猶如我們在使用HTML中table（表格）元素一般，行與列劃分。

其中1fr，fr是fraction（讀音：[?fr?k?n] n:小部分; 少量; 一點兒; 分?jǐn)?shù); 小數(shù);）的縮寫，提供的一個單位，和我們在使用flex布局時，子元素設(shè)置flex:1 | 2一個性質(zhì)，是一個比例值。

二、父元素?fù)碛心男傩詸?quán)限對其子元素進(jìn)行操控

1、grid-template

比如，我們創(chuàng)建一個2行（高度100px與80px）3列（第一個和最后一個寬度為100px）的布局結(jié)構(gòu)

那么我們通過grid-template屬性進(jìn)行操作，上面說了grid-template是3個屬性的一個簡寫或縮寫

grid-template-columns屬性是定義其列的寬度，

grid-template-rows屬性定義行的高度

CSS Grid 網(wǎng)格布局（2行3列）

width:640px;
display: grid;
grid-template: 100px 80px/100px auto 100px;// <row>/<col>

2、grid-gap

如果我們需要對網(wǎng)格間設(shè)置間隔寬度，那么就可以使用grid-gap屬性對其操作，它和grid-template一樣，也是另外2個屬性的簡寫，即：

grid-row-gap屬性設(shè)置其行與行的間隔

grid-column-gap屬性則設(shè)置其列與列的間隔

類似我們常用的padding屬性（padding: 20px 10px）一般，只不過對于Grid網(wǎng)格布局屬于行與列的結(jié)構(gòu)，所以，它的屬性值對應(yīng)順序是行與列。

按我們常說的口語順序即可，幾行幾列，很少見說幾列幾行吧。

所以，其表示方法如：

grid-gap: 20px 15px; // <行><列>

CSS Grid 網(wǎng)格布局 grid-gap

width:640px;
display: grid;
grid-template: 100px 80px/100px auto 100px;
grid-gap: 20px 15px;

3、repeat()

repeat字面意思我們就可以看出其屬性的作用，基于一定值我們可以通過其操作，避免重復(fù)，簡化操作和js中函數(shù)一般，避免重復(fù)代碼堆積，造成不必要的勞動。

例如我們創(chuàng)建一個2行3列的布局結(jié)構(gòu)，要求行高100px,寬度等比。

CSS Grid網(wǎng)格布局 repeat()

那么基于上述及其上上述，我們就可以這樣寫：

width:640px;
display: grid;
grid-template: repeat(2, 100px)/repeat(3, 1fr);
grid-gap: 20px 15px;

這樣避免重復(fù)值操作，當(dāng)然1~2個無所謂，多個網(wǎng)格呢？就麻煩了。

repeat()其參數(shù)：第一個參數(shù)是重復(fù)次數(shù)，第二個是其屬性值。

4、grid-auto-flow

在對其劃分網(wǎng)格后，我們可以通過grid-auto-flow控制子元素如何排列于網(wǎng)格。

默認(rèn)是橫向排列，其屬性值為row，上述示例均為橫向轉(zhuǎn)行排列，那么我們看看縱向效果排列所呈現(xiàn)的效果，看里面的數(shù)字。

CSS Grid 網(wǎng)格布局 grid-auto-flow

我們設(shè)置grid-auto-flow屬性值為column，結(jié)構(gòu)排列將由原來的"123456"變更為"135246";

grid-auto-flow:column;

詳細(xì)的參考官方文檔...

三、Grid子元素項目上操作權(quán)限

1、grid-row與grid-column

grid-row與grid-column其表示法1/3方式，和上述一樣屬于屬性（grid-row-start/grid-row-end及其grid-column-start/grid-column-end）簡寫方式，效果一樣。

即子項目定位于網(wǎng)格線開始與結(jié)束位。

例如，我們讓其第一個子項目行始于1結(jié)束于第3個網(wǎng)格線，列由1至2，基于父級我們設(shè)置的示例，這里我們刪除一個子項，為了顯示效果。

CSS Grid 網(wǎng)格布局 grid-row grid-column

ul{
    width:640px;
    display: grid;
    grid-template: repeat(2, 100px)/repeat(3, 1fr);
    grid-gap: 20px 15px;
    grid-auto-flow:column;
    font-size:16px;
    color:white;
}
li:first-of-type{
    grid-row: 1/3;
    grid-column: 1/2;
    background-color:red;
    color:white;
}

其中子項目中的grid-row與grid-column表示法等同于<開始位>/<結(jié)束位>

grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;

2、span

表示其子項跨域數(shù)，例如上述效果我們我們也可以這樣實現(xiàn)。

grid-row: 1/ span 2;
grid-column: 1/2;

至于justify-content、align-content等等在flex布局中我們已經(jīng)認(rèn)識了，這里就不再描述了。

好了，就到這里，這篇文章貌似寫了好幾個小時，更多的大家創(chuàng)建demo去研究；同時更多屬性方法跨域參考W3C官方文檔去研究。

上周發(fā)布的Google Chrome 89瀏覽器之后，Chrome 90瀏覽器現(xiàn)在以測試版的形式推出，帶來了之前提到的對WebRTC使用的AV1編碼支持，用于在專注于實時視頻會議的Web瀏覽器內(nèi)提供AV1編碼能力。

雖然現(xiàn)時AOMedia參考編碼器的性能仍然相當(dāng)?shù)停@是向改善WebRTC支持前進(jìn)的一步。

谷歌在Chrome 90 Beta公告中指出，AV1提供了更好的壓縮效率，對于極低帶寬的網(wǎng)絡(luò)（30kbps及以下）有更好的效果，并且提供了比VP9和其他編解碼器更好的屏幕共享效率。

Chrome 90測試版還圍繞MediaStreamTrack可插入流、getCurrentBrowsingContextMedia、WebAssembly異常處理和WebXR AR燈光估計等方面進(jìn)行了新的試驗。Chrome 90還在研究CSS縱橫向插值、自定義狀態(tài)偽類、"overflow: clip"CSS屬性支持等面向開發(fā)者新增功能。

下載地址：

https://www.google.com/intl/zh-CN/chrome/beta/

關(guān)于新發(fā)布的Chrome 90測試版的更多細(xì)節(jié)，請通過Chromium.org了解：

https://blog.chromium.org/2021/03/chrome-90-beta-av1-encoder-for-webrtc.html