K60至尊版狂暴引擎2.0加持：超177萬跑分斬獲性能第一
Redmi的后性能時代戰略發布會今天下午如期舉辦，在本次發布會上，Redmi公布了多項關于和聯發科的深度合作，以及新機K60 Ultra在軟件和硬件方面的特性，例如：“K60 至尊版，雙芯旗艦
大家還記得我們之前介紹過的CSS_Flex 那些鮮為人知的內幕,在文章中我們不是對API的羅列，而是從內部原理方向來解析Flex中我們常見的屬性和使用方式。該篇文章也得到大家的一致好評。
而今天，我們來講講我們平時可能會忽略，但是在一些應用場景中能讓我們得心應手的另外的布局方式 - Grid。
還是和上一篇Flex文章一樣，我們不是對Grid的API進行羅列，而是從更深層次的角度來了解Grid。也就是意味著，本篇文章需要一定的Grid的基礎知識。如果大家還不了解，可以翻看阮一峰老師寫的CSS Grid 網格布局教程[1]
好了，天不早了，干點正事哇。
?
Gird是個啥Grid是重要的布局算法之一- 開啟
Grid布局- 創建網格單元
- 分配子項
- 對齊方式
?
網格布局（Grid）將網頁劃分成一個個網格，可以任意組合不同的網格，做出各種各樣的布局。
上圖這樣的布局，就是 Grid 布局的拿手好戲。
Grid 布局與 Flex 布局有一定的相似性，都可以指定「容器」內部多個「項目」的位置。但是，它們也存在重大區別。
Flex 布局是「軸線布局」，只能指定項目針對軸線的位置，可以看作是「一維布局」。Grid 布局則是將容器劃分成行和列，產生單元格，然后指定項目所在的單元格，可以看作是「二維布局」。?
Grid布局遠比Flex布局強大。?
容器是應用了 display: grid 樣式的元素。它是所有網格項的「直接父元素」。
<div class="container"> <div class="item item-1"> </div> <div class="item item-2"> </div> <div class="item item-3"> </div></div>在這個例子中，.container所對應的元素就是就是容器。
項目是網格容器的子元素（即「直接后代」）。
<div class="container"> <div class="item"> </div> <div class="item"> <p class="sub-item"> </p> </div> <div class="item"> </div></div>在這個例子中，item 元素是項目，但 sub-item 不是。
?
網格線是構成網格結構的分割線。它們可以是垂直的（列網格線）或水平的（行網格線），并位于行或列的兩側。?
在這里，黃色線是列網格線的一個例子。
網格單元是兩個相鄰的行網格線和兩個相鄰的列網格線之間的空間。它是網格的單個「單位」。
在這個例子中，這是位于行網格線 1 和 2 之間，以及列網格線 2 和 3 之間的網格單元。
?
軌道是兩個相鄰網格線之間的空間。?
我們可以將它們看作是網格的列或行。
在這個例子中，這是第二行網格線和第三行網格線之間的軌道。
?
網格區域是由四條網格線圍成的總空間。?
一個網格區域可能由「任意數量的網格單元組成」。
在這個例子中，這是位于行網格線 1 和 3 之間，以及列網格線 1 和 3 之間的網格區域。
根據 caniuse[2]，Grid 支持 97.78% 的用戶。
在我們構建復雜頁面時，就會用到各種各樣的布局算法，每種算法用于不同類型的用戶界面。如下圖：
Flexbox 設計用于沿單個軸分配項目，這個我們在CSS_Flex 那些鮮為人知的內幕有過介紹Grid是我們今天的主角脫離文檔流的元素
文本環繞的布局
相比，我們比較熟悉的布局算法(flaot/position/table等)Grid 是最新最強大的布局算法。grid是2017年才發布的。
?
Grid最令人神往的地方就是它的網格結構，即行和列，具體表現就是這些頁面布局只需在CSS中定義即可。?
下面的頁面結構是我們常見的「圣杯布局」
<header></header><nav></nav><main></main><footer></footer>
使用 Grid來實現該布局，我們只需要在CSS中劃分好具體哪個元素所占的區域即可。(這里我們就不貼代碼了)
而在其他任何布局模式中，創建這樣的區塊的唯一方法就是「添加更多的 DOM 節點」。例如，在表格布局中，每行都是用 <tr> 創建的，每個行中的單元格則使用 <td> 或 <th>：
<table> <tbody> <!-- 第一行 --> <tr> <!-- 第一行中的單元格 --> <td></td> <td></td> <td></td> </tr> <!-- 第二行 --> <tr> <!-- 第二行中的單元格 --> <td></td> <td></td> <td></td> </tr> </tbody></table>?
與其他布局不同，
Grid允許我們完全在CSS中管理布局。我們可以將容器切成任意形狀，然后將子元素和這些區塊對應即可。?
我們通過 display 屬性選擇啟用網格布局模式：
.container { display: grid | inline-grid;}grid – 生成塊級網格inline-grid – 生成內聯級網格?
默認情況下，
Grid使用「單列」，并根據子元素的數量動態創建行。這被稱為「隱式網格」，因為我們沒有明確定義任何結構。?
隱式網格是動態的；根據子元素的數量將添加和刪除行。每個子元素都有自己的行。
?
默認情況下，網格容器的高度由其子元素確定。
?
它會動態增長和收縮。其實，網格容器仍然使用流式布局，而流式布局中的塊級元素會垂直增長以容納其內容。「只有子元素使用網格布局進行排列」。
當我們將容器的高度固定后，在這種情況下，其內部項目的高度會「均分」容器高度。也就是當擁有多個項目時它們被分成大小相同的行。
默認情況下，Grid將創建單列布局。我們可以使用grid-template-columns[7]屬性指定列：
通過將兩個值傳遞給grid-template-columns —— 25%和75% —— 告訴Grid算法將元素分成兩列。
列可以使用任何有效的CSS <length-percentage>值定義，包括像素、rems、視口單位等。此外，我們還可以使用新的單位，即fr單位[8]：
這里多說一句，在CSS Values and Units Module Level 4[9]中定義了關于length的值
這里的fr代表分數(fraction)。在這個示例中，我們說第一列應該占用1個單位的空間，而第二列占用3個單位的空間。這意味著總共有4個單位的空間，這成為分母。第一列占據了可用空間的1/4，而第二列占據了3/4。
fr單位為Grid帶來了類似Flexbox樣式的靈活性。百分比和 <length> 值會創建硬約束，而fr列可以「根據需要自由地增長和收縮，以容納其內容」。
仔細觀看下面的例子，Grid的項目一個用了fr一個用了%。此時我們為第一列的頭像賦予了一個指定寬度的圖像。隨著容器寬度發生變化，當容器寬度小到一定程度，即第一列的寬度小于圖像的設定寬度時，就會發生如下的變化。
百分比的列的寬度大小會按照容器寬度*N%變化，當列寬度小于圖像寬度時，圖像從列中溢出。fr單位的列無論如何縮小容器寬度，該列也不會收縮到其最小內容大小以下。?
更準確地說：
fr單位分配額外的空間。首先，列寬將根據其內容計算。如果有剩余空間，它將根據fr值進行分配。該特性和flex-grow是一致的。?
我們再來用一個例子來說明fr和%的區別。此時我們用gap來設置所有列和行之間添加了固定量的空間
看看在%和fr之間切換時會發生什么：
當使用基于%的列時，內容會溢出到網格父容器之外。這是因為%是使用總網格區域來計算的。這兩列消耗了父容器的內容區域的25%+75%=100%，并且它們不允許收縮。當我們添加了16px的gap時，列別無選擇，只能溢出容器。
相比之下，fr是「基于額外的空間計算」的。在這種情況下，額外的空間已經減少了16px，以用于設置gap。
如果我們向一個兩列網格添加「超過兩個子元素」會發生什么呢？
從結果來看，gird將第三個元素放置到了第二行。
?
grid算法希望確保「每個子元素都有自己的網格單元」。它會根據需要「生成新的行來實現這個目標」。?
這在我們有可變數量的項目并且我們希望容器自動排布項目的情況下非常方便。
不過，在其他情況下，我們希望「顯式定義行，以創建特定的布局」。我們可以使用grid-template-rows[10]屬性來實現：
通過同時定義grid-template-rows和grid-template-columns，我們創建了一個顯式網格。我們就可以用幾行代碼，實現了所謂的「圣杯布局」。
假設我們正在構建一個日歷：
Grid是處理這種情況的絕佳工具。我們可以將其構建為一個7列的網格，每列占據1個單位的空間：
.calendar { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}上面方式肯定是有效可行的，但是我們不想重復寫1fr多次。此時我們就可以使用repeat()來解決。
.calendar { display: grid; grid-template-columns: repeat(7, 1fr);}repeat函數會為我們進行復制和粘貼。
?
默認情況下，
Grid算法會將每個子項分配給「第一個未占用的網格單元」?
但是呢，Grid還賦予我們一種能力-我們可以將我們的項目分配到任何我們想要放置的單元格！子項甚至可以跨越多行/列。
grid-row[11]和grid-column[12]屬性允許我們指定網格子項應該占據哪些軌道。
如果我們希望子項占據單個行或列，我們可以通過其編號來指定。grid-column: 3將使子項位于第三列。
網格子項還可以跨越多個行/列。其語法「使用斜杠來劃分起始和結束位置」：
.child { grid-column: 1 / 4;}上面的1 / 4可不是一個分數，在CSS中，「斜杠字符不用于除法，而是用于分隔值組」。在這種情況下，它允許我們在一個聲明中設置起始和結束列。
這本質上是這樣的簡寫形式：
.child { grid-column-start: 1; grid-column-end: 4;}?
我們提供的數字是「基于列線」，而不是列索引。
?
一個有4列的網格實際上有5條列線。當我們將子項分配到網格時，我們使用這些線來錨定它們。如果我們希望子項跨越前3列，它需要從第1行開始，并在第4行結束。
在從左到右的語言中，比如英語，我們從左到右計算列。然而，使用負數行號，我們也可以反向計算，從右到左。
.child { /* 位于從右數的第2列： */ grid-column: -2;}?
我們還可以混合使用正數和負數。
?
對比上面兩個例子，盡管我們根本沒有改變grid-column的配置(grid-column:1 /-1)，雖然列數增加了，但是每個例子中的子項都跨越了網格的整個寬度！
假設我們正在構建這個布局：
根據我們目前學到的知識，我們可以這樣操作：
.grid { display: grid; grid-template-columns: 2fr 5fr; grid-template-rows: 50px 1fr;}.sidebar { grid-column: 1; grid-row: 1 / 3;}header { grid-column: 2; grid-row: 1;}main { grid-column: 2; grid-row: 2;}上面例子是可行的，但是Grid還為我們提供了更好的解決方案 - grid-areas[13]
像之前一樣，我們使用 grid-template-columns 和 grid-template-rows 定義了網格結構。除此之外，我們還使用grid-template-areas定義了一個區域的劃分
.parent { grid-template-areas: 'sidebar header' 'sidebar main';}使用grid-template-areas我們勾勒出了我們想要創建的網格。
?
每一行代表一行，每個單詞是我們給網格的特定部分命名。
?
然后，我們不是用 grid-column 和 grid-row 分配子項，而是用 grid-area[14]！
當我們想讓特定區域跨越多行或多列時，我們可以在我們的模板中「重復該區域的名稱」。在這個例子中，sidebar區域跨越了兩行，所以我們在第一列的兩個單元格中都寫了 sidebar。
在構建顯示布局時，我們可以通過使用areas和行/列都可以達到目的，但是呢，使用areas時，它允許我們給grid分配語義含義，而不是使用晦澀難懂的行/列數字。也就是說，當網格具有固定數量的行和列時，areas效果最佳。grid-column 和 grid-row 可以在隱式網格中很有用。
?
在處理網格分配時存在一個重要的問題：
Tab 鍵順序仍然基于 DOM 位置，而不是網格位置。?
通過一個示例會更容易理解。在這個示例中，我設置了一組按鈕，并使用 Grid 對它們進行了排列：
如果我們使用的是帶有鍵盤的設備，可以通過點擊左上角的第一個按鈕（One），然后按 Tab 鍵逐個移動按鈕。
你應該會看到類似于這樣的情況：
焦點輪廓在頁面上毫無規律地跳動,這是因為按鈕的焦點是「基于它們在 DOM 中出現的順序而定」的。
為了解決這個問題，我們應該重新按視覺順序在 DOM 中重新排列網格子項，以便我可以從左到右，從上到下進行 Tab 鍵瀏覽。
到目前為止我們看到的所有示例中，我們的列和行都會伸展以填滿整個網格容器。然而，我們是通過配置讓內容進行別樣的排布。
start：將網格與容器的開始邊緣對齊end：將網格與容器的結束邊緣對齊center：將網格置于容器的中心stretch：重新調整網格項的大小，以使網格填充容器的整個寬度space-around：在每個網格項之間放置相等量的空間，兩端的空間為一半大小space-between：在每個網格項之間放置相等量的空間，兩端沒有空間space-evenly：在每個網格項之間放置相等量的空間，包括兩端例如，假設我們定義了兩個都是 90px 寬的列。只要網格容器大于 180px，就會有一些多余的空間：
如果想利用多余空間進行對項目的排布處理，此時我們可以使用 justify-content 屬性來控制列的分布，并且我們接受上面所列舉的各種值。
.container { justify-content: start | end | center | stretch | space-around | space-between | space-evenly; }justify-content:startjustify-content:centerjustify-content:endjustify-content:space-betweenjustify-content:space-aroundjustify-content:space-evenly
看到space-between/space-around是否想到Flex,布局排布的原理是一樣的，只不過Grid和Flex最大的區別在于，我們正在「對齊列，而不是項本身」。本質上，justify-content[15] 讓我們更好的操作網格的列，以便可以根據我們的意愿將它們分布在整個網格中。
如果我們想在列內對齊項目本身，我們可以使用 justify-items 屬性：
start：將項目與其單元格的開始邊緣對齊end：將項目與其單元格的結束邊緣對齊center：將項目置于其單元格的中心stretch：填充單元格的整個寬度（這是默認值）.container { justify-items: start | end | center | stretch;}當我們將一個 DOM 節點放入網格父元素時，默認行為是它會跨越整個列，就像流式布局中的 <div> 會橫向拉伸以填滿其容器一樣。但是，使用 justify-items，我們可以調整這種行為。
.container { justify-items: stretch;}.container { justify-items: start;}.container { justify-items: end;}.container { justify-items: center;}我們可以使用justify-self來控制「特定網格子元素」的對齊方式
其值為以下幾個：
start：將網格項與其單元格的開始邊緣對齊end：將網格項與其單元格的結束邊緣對齊center：將網格項置于其單元格的中心stretch：填充單元格的整個寬度（這是默認值）.item { justify-self: start | end | center | stretch;}.item-a { justify-self: start;}.item-a { justify-self: end;}.item-a { justify-self: center;}.item-a { justify-self: stretch;}到目前為止，我們一直在討論如何在水平方向上對齊內容。Grid 還提供了一組額外的屬性來在垂直方向上對齊內容：
其取值為以下幾種：
stretch：填充單元格的整個高度（這是默認值）start：將項目與其單元格的開始邊緣對齊end：將項目與其單元格的結束邊緣對齊center：將項目置于其單元格的中心baseline：沿著文本基線對齊項目。.container { align-items: start | end | center | stretch;}.container { align-items: start;}.container { align-items: end;}.container { align-items: center;}.container { align-items: stretch;}align-content 類似于 justify-content，但它影響的是行而不是列。同樣，align-items 類似于 justify-items，但它處理的是網格區域內項目的垂直對齊，而不是水平對齊。
?
為了進一步梳理：
justify— 處理列align— 處理行content— 處理網格結構items— 處理網格結構內的 DOM 節點。?
最后，除了 justify-self，我們還有 align-self。這個屬性控制單個網格項在其單元格內的垂直位置。
place-content 屬性是一個縮寫。它是這樣的語法糖：
.parent { justify-content: center; align-content: center;}使用該屬性，我們可以用最少的代碼實現我們平時很難實現的布局。
只使用兩個 CSS 屬性，我們就可以將子元素水平和垂直居中于容器中：
正如我們所學到的，justify-content 控制列的位置。align-content 控制行的位置。在這種情況下，我們有一個隱式網格只有一個子元素，因此我們得到一個 1×1 網格。place-content: center 將行和列都推向中心。
將元素放置在左上角將元素放置在右下角
本文鏈接：http://www.www897cc.com/showinfo-26-86681-0.htmlCSS Grid 那些鮮為人知的內幕
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號