CSS Gird布局執行個體教程分享

來源:互聯網
上載者:User
本文主要介紹了CSS Gird布局教程指南的相關資料,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,希望能協助到大家。

CSS網格布局是一個二維的基於網格的布局系統, 其目的在於完全改變我們設計基於網路的使用者介面的方式。CSS一直用來布局我們的網頁, 但是他從來沒有做過很好的工作, 最開始我們使用表格,然後 float , positioninline-block 。但是這些本質上是css的hack, 並且遺漏了很多重要的功能(例如垂直置中),後來flexbox出現了, 但是他的目的只是為了更簡單的一維布局, 而不是複雜的二維布局。網格是第一個專門為解決布局問題而建立的CSS模組 在瀏覽器安全色性方面,可以看一下caniuse的資料

網格容器

在元素中應用 display: grid 。這是所有網格布局的直接父元素, 在這個例子中 container 是網格容器


<p class="container">  <p class="item item-1"></p>  <p class="item item-2"></p>  <p class="item item-3"></p></p>

網格項目

網格容器的小孩(例如直接子項目),這裡的 item 元素是網格項目,但 sub-item 不是


<p class="container">  <p class="item"></p>  <p class="item">    <p class="sub-item"></p>  </p>  <p class="item"></p></p>

網格線

構成網格結構的分界線, 他們既可以是垂直的(列)也可以是水平的(行)。這裡的黃線是一個列網格線的例子

網格軌道

兩個相鄰網格線之間的空間。你可以把它們想象成網格的列或行。這是第二行和第三行網格線之間的網格軌道

網格儲存格

兩個相鄰的行和兩個相鄰的列網格線之間的空間,也就是網格中的一個單元,這是行網格線1和2之間的網格單元, 以及列網格線2和3

網格空間

四個網格線包圍的總空間,網格空間可以由任意數量的網格單元組成。這裡是行網格線1和3之間的網格空間, 以及列網格線1和3

網格容器的屬性

display

將元素定義為網格容器, 並未其內容建立新的網格格式上下文 值:

  1. gird: 產生塊級網格

  2. inline-grid: 產生內連網格

  3. subgrid: 如果你的網格容本身是一個網格項目(即嵌套網格), 你可以使用這個屬性來表明你想繼承他父母的行/列而不是他自己的。


.container{  display: grid | inline-grid | subgrid}

grid-template-columns, grid-template-rows

使用空格分隔的值列表來定義網格的列和行。這些值表示軌道大小,他們之間的空間表示網格線 值:

: 可以是網格中的空閑空間的長度,百分比, 或分數

: 線的名稱 例如, 在網格軌跡之間流出空白地區時, 網格線會自動分配數字名稱


.container{  display: grid;  grid-template-columns: 40px 50px auto 50px;  grid-template-rows: 25% 100px auto;}

但是你可以選擇明確命名行,請注意行名稱的括弧文法


.container{  grid-template-columns: [first] 40px [line2] 50px [line2] auto [line3] auto [col4-start] 50px [five] 5px;   grid-template-rows: [row1-start] 25% [row1-end] 100px [thrid-line] auto [last-line];}

請注意,一行/列可以有多個名字,例如這裡第二列將有兩個名字


.contaienr{  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end]}

如果您的定義包含重複的部分,您可以使用repeat()符號來簡化


.container{  grid-template-columns: repeat(3, 20px [col-start]) 5%;}

相當於這個


.container{  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;}

設定單位為 fr 網格會允許您設定的網格軌道大小為網格容器的自由空間的一小部分,例如,這會將每個項目設定為容器寬度的三分之一


.container {  grid-template-columns: 1fr 1fr 1fr;}

可用空間是在任何非彈性項目之後計算的,在這個例子中, fr 單元可用空間的總量不包括50px


.container{  grid-template-columns: 1fr 50px 1fr 1fr;}

grid-template-areas

通過應用 grid-area 屬性指定網格空間的名稱來定義網格模板。 值:

  1. : 指定的網格空間的名稱 grid-area

  2. : 表示一個空的網格單元

  3. none: 沒有定義網格空間


.container{  grid-template-areas: "<grid-area-name> | . | none | ...";}

例子


.container{  display: grid;  grid-template-columns: repeat(4, 50px);  grid-template-rows: auto;  grid-template-areas:     "header header header header"    "main main . slidebar"    "footer footer footer footer"}.item-a{  grid-area: header;}.item-b{  grid-area: main;}.item-c{  grid-area: slidebar;}.item-d{  grid-area: footer;}

注意: 你不是用這個文法命名行只是空間, 當你使用這種文法時, 空間兩端的行實際上是自動命名的,如果你的網格空間名字是foo,那麼這個空間的起始行和起始列的名字就是foo-start,最後一列和最後一行就是foo-end;

grid-template

一個簡短設定 grid-template-rows , grid-template-columnsgrid-template-areas 在一起的聲明


.container {  grid-template: none | subgrid | <grid-template-rows> <grid-area-name>/ <grid-template-columns>;}

由於 grid-template 不會重設隱式網格屬性( grid-auto-columns , grid-auto-rows , grid-auto-flow ),這可能是您在大多數情況下所要做的,所以建議使用 grid 屬而不是 grid-template

grid-column-gap grid-row-gap

指定網格線的大小 值:

: 長度值


.container{  grid-column-gap: <line-size>;  grid-row-gap: <line-size>;}


.container{  display: grid;  grid-template-columns: repeat(4, 50px);  grid-template-rows: repeat(4, 80px);  grid-column-gap: 10px;  grid-row-gap: 15px;}

grid-gap

一種速記 grid-row-gapgrid-column-gap 值:

: 長度值


.container {  grid-gap: <grid-row-gap><grid-column-gap>}

justify-items

沿著行軸對齊網格內的內容(而不是 align-items 沿著列軸對齊),適用於所有網格容器內的網格項目 值:

  1. start: 將內容對齊到網格地區的左端

  2. end: 將內容對齊到網格地區的右端

  3. center: 將網格地區中心的內容對齊

  4. stretch: 填充網格地區的整個寬度


.container{  justify-items: start | end | center | stretch}

例子


.container{  justify-items: start;}


.container{  justify-items: end;}


.container{  justify-items: center;}


.container{  justify-items: stretch;}

此行為也可以通過 justify-self 在個別網格項目上設定

align-items

沿列軸對齊網格的內容(而不是 justify-items 沿著行軸對齊)。該值適用於容器內的所有網格項目 值:

  1. start: 將內容對齊到網格空間的頂部

  2. end: 將內容對齊到網格空間的底部

  3. center: 將內容對齊到網格空間的中心

  4. stretch: 填充網格空間的整個高度


.container {  align-items: start | end | center | stretch;}

例子


.container {  align-items: start;}


.container {  align-items: end;}


.container {  align-items: center;}


.container {  align-items: stretch;}

此行為也可以通過 align-self

屬性在個別網格項目上設定

justify-content

有時,網格的總大小可能小於其網格容器的大小, 如果您的所有網格項目都是用非靈活單位進行大小調整,就可能發生這種情況。這時候可以設定網格容器內的網格的對齊,此屬性沿著行軸對齊網路 值:

  1. start: 將網格對齊到網格容器的左端

  2. end: 將網格對齊到網格容器的右端

  3. center: 將網格對齊到網格容器的中心

  4. stretch: 調整網格的大小以允許網格填充網格容器的整個寬度

  5. space-around: 在每個網格項目之間分配一個均勻的空間,在兩個端分配一半的空間

  6. space-between: 在每個網格項目之間分配一個均勻的空間,在兩個端沒有分配空間

  7. space-evenly:在每個網格項目之間分配一個均勻的空間,包括兩個遠端 例子


.container{  justify-content: start;}


.container{  justify-content: end;}


.container{  justify-content: center;}


.container{  justify-content: stretch}


.container{  justify-content: space-around;}


.container{  justify-content: space-between;}


.container{  justify-content: space-evenly;}

align-content

此屬性和 justify-content 一樣,只不過是沿著列軸對齊網格 值:

  1. start: 將網格對齊到網格容器的頂部

  2. end: 將網格對齊到網格容器的底部

  3. cneter: 將網格對齊到網格容器的中心

  4. stretch: 調整網格項目的大小, 以允許網格項目填充網格容器的整個高度

  5. space-around: 在每個網格項目之間分配均勻的空間,在兩端分配一半的空間

  6. sapce-between: 在每個網格項目之間分配一個均勻的空間,在兩端沒有空間

  7. space-evenly: 在每個項目之間分配一個均勻的空間, 包括兩端 例子:


.container{  align-content: start;}


.container{  align-content: end}


.container{  align-content: center;}


.container{  align-content: stretch;}


.container{  align-content: space-around;}


.container{  align-content: space-between;}


.container{  align-content: space-evenly;}

grid-auto-columns grid-auto-rows

指定任何自動產生的網格軌道的大小,當你明確聲明超出定義的網格空間的行或列(通過grid-template-rows / grid-template-columns)時間,會建立隱式網格軌道 值:

: 可以長度, 百分比, 或分數(使用 fr 單位) 如何建立隱式網格軌道, 例子:


.contaienr{  display: grid;  grid-template-columns: repeat(2, 60px);  grid-template-rows: repeat(2, 90px);}

這樣會建立一個2 X 2的網格

但現在如果你使用 grid-columngrid-row 定位你的網格項目是這樣的


.item-a {  grid-column: 1 / 2;  grid-row: 2 / 3;}.item-b {  grid-column: 5 / 6;  grid-row: 2 / 3;}

我們告訴 item-b 從第5行開始, 到第6行結束, 但是我們沒有定義第5行或第6行, 因為我們引用了不存在的行,所以建立了寬度為0的隱式軌道來填補空白,我們可以使用 grid-auto-columnsgrid-auto-rows 來指定這些隱式軌道的寬度


.container{  grid-auto-columns: 60px;}

grid-auto-flow

如果您沒有明確放置在網格上的網格項目,則自動分配演算法會自動分配這些項目。該屬性控制自動分配演算法的原理 值:

  1. column: 告訴自動分配演算法依次填充每行,根據需要添加新行

  2. row: 告訴自動分配演算法一次填充每列,根據需要添加新列

  3. dense: 告訴自動分配演算法,如果之後出現較小的項目,則嘗試在網格中儘早填充空間

  4. dense 可能導致您的項目出現亂序 例子:


<section class="container">  <p class="item-a">item-a</p>  <p class="item-b">item-b</p>  <p class="item-c">item-c</p>  <p class="item-d">item-d</p>  <p class="item-e">item-e</p></section>

你定義了一個五行兩列的網格,並設定 grid-auto-flowrow


.container{  display: grid;  grid-template-columns: repeat(5, 60px);  grid-template-rows: repeat(2, 30px);  grid-auto-flow: row;}

將項目分配在網格容器上,只能為其中的兩個項目分配空間


.item-a {  grid-column: 1;  grid-row: 1 / 3;}.item-e {  grid-column: 5;  grid-row: 1 / 3;}

如果將 grid-auto-flow 設定為 column

grid

簡寫為所有設定下列屬性的單一聲明: grid-template-rows , grid-template-columns , grid-template-areas , grid-auto-rows , grid-auto-columnsgrid-flow

網格項目的屬性

grid-column-start, grid-column-end, grid-row-start,grid-row-end

通過引用特定的網格線來確定網格內項目的位置。 值:

  1. : 可以是一個數字來引用一個編號的網格線,或者一個名稱來引用一個命名的網格線

  2. span : 項目將跨越提供的網格軌道數量

  3. span : 項目將跨越, 直到與它提供的名稱命中

  4. auto: 自動分配


.item-a {  grid-column-start: 2;  grid-column-end: five;  grid-row-start: row1-start  grid-row-end: 3}


.item-b {  grid-column-start: 1;  grid-column-end: span col4-start;  grid-row-start: 2  grid-row-end: span 2}

如果沒有 grid-column-end / grid-row-end 聲明, 該項目將預設跨越一個項目,項目可以相互重疊,您可以使用 z-index 來控制堆疊順序

grid-column, grid-row

簡寫為 grid-column-start + grid-column-endgrid-row-start + grid-row-end 值:


.item-c {  grid-column: 3 / span 2;  grid-row: third-line / 4;}

grid-area

為項目提供一個名稱,以便可以通過使用 grid-template-areas 屬性建立的模板來引用他。或者屬性可以用作 grid-row-start + grid-column-start + grid-row-end + grid-column-end 值:

  1. : 你選擇的名稱

  2. / / / :可以是數字或命名行


.item {  grid-area:  <name> | <row-start> / <column-start> / <row-end> / <column-end>;}

例子: 作為項目分配名稱的一種方法


.item-d{  grid-area: header;}

作為 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的簡寫:


.item-d {  grid-area: 1 / col4-start / last-line / 6}

justify-self

沿著行軸對齊網格的內容,此屬性適用與單個網格項目的內容 值:

  1. start: 將內容對齊到網格空間的左端

  2. end: 將內容對齊到網格空間的右端

  3. center: 將網格空間中心的內容對齊

  4. 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;}

align-self

沿列軸對齊網格內的內容,此值適用與單個網格項目內的內容 值

start: 將內容對齊到網格空間的頂部

end: 將內容對齊到網格空間的底部

center: 將網格空間中心的內容對齊

stretch: 填充網格空間的整個高度


.item {  align-self: start | end | center | stretch;}

例子:


.item-a {  align-self: start;}


.item-a {  align-self: end;}


.item-a {  align-self: center;}


.item-a {  align-self: stretch;}

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.