真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

CSS中Gird布局的示例分析

這篇文章主要介紹CSS中Gird布局的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)成立于2013年，我們提供高端重慶網(wǎng)站建設(shè)公司、成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)站定制、全網(wǎng)整合營銷推廣、小程序設(shè)計(jì)、微信公眾號開發(fā)、seo優(yōu)化排名服務(wù)，提供專業(yè)營銷思路、內(nèi)容策劃、視覺設(shè)計(jì)、程序開發(fā)來完成項(xiàng)目落地，為成都VR全景企業(yè)提供源源不斷的流量和訂單咨詢。

CSS網(wǎng)格布局是一個(gè)二維的基于網(wǎng)格的布局系統(tǒng), 其目的在于完全改變我們設(shè)計(jì)基于網(wǎng)絡(luò)的用戶界面的方式。CSS一直用來布局我們的網(wǎng)頁, 但是他從來沒有做過很好的工作, 最開始我們使用表格,然后 float , position 和 inline-block 。但是這些本質(zhì)上是css的hack, 并且遺漏了很多重要的功能(例如垂直居中),后來flexbox出現(xiàn)了, 但是他的目的只是為了更簡單的一維布局, 而不是復(fù)雜的二維布局。網(wǎng)格是第一個(gè)專門為解決布局問題而創(chuàng)建的CSS模塊 在瀏覽器兼容性方面,可以看一下caniuse的數(shù)據(jù)

CSS中Gird布局的示例分析 

網(wǎng)格容器

在元素中應(yīng)用 display: grid 。這是所有網(wǎng)格布局的直接父元素, 在這個(gè)例子中 container 是網(wǎng)格容器


  
  
  

網(wǎng)格項(xiàng)目

網(wǎng)格容器的小孩(例如直接子元素),這里的 item 元素是網(wǎng)格項(xiàng)目,但 sub-item 不是


  
  
    
  
  

網(wǎng)格線

構(gòu)成網(wǎng)格結(jié)構(gòu)的分界線, 他們既可以是垂直的(列)也可以是水平的(行)。這里的黃線是一個(gè)列網(wǎng)格線的例子

CSS中Gird布局的示例分析 

網(wǎng)格軌道

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

CSS中Gird布局的示例分析

 網(wǎng)格單元格

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

CSS中Gird布局的示例分析

 網(wǎng)格空間

四個(gè)網(wǎng)格線包圍的總空間,網(wǎng)格空間可以由任意數(shù)量的網(wǎng)格單元組成。這里是行網(wǎng)格線1和3之間的網(wǎng)格空間, 以及列網(wǎng)格線1和3

CSS中Gird布局的示例分析

 網(wǎng)格容器的屬性

display

將元素定義為網(wǎng)格容器, 并未其內(nèi)容建立新的網(wǎng)格格式上下文 值：

  1. gird: 生成塊級網(wǎng)格

  2. inline-grid: 生成內(nèi)聯(lián)網(wǎng)格

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

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

grid-template-columns, grid-template-rows

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

: 可以是網(wǎng)格中的空閑空間的長度,百分比, 或分?jǐn)?shù)

: 線的名稱 例如, 在網(wǎng)格軌跡之間流出空白區(qū)域時(shí), 網(wǎng)格線會(huì)自動(dòng)分配數(shù)字名稱

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

CSS中Gird布局的示例分析

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

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

CSS中Gird布局的示例分析

請注意,一行/列可以有多個(gè)名字,例如這里第二列將有兩個(gè)名字

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

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

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

相當(dāng)于這個(gè)

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

設(shè)置單位為 fr 網(wǎng)格會(huì)允許您設(shè)置的網(wǎng)格軌道大小為網(wǎng)格容器的自由空間的一小部分,例如,這會(huì)將每個(gè)項(xiàng)目設(shè)置為容器寬度的三分之一

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

可用空間是在任何非彈性項(xiàng)目之后計(jì)算的,在這個(gè)例子中, fr 單元可用空間的總量不包括50px

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

grid-template-areas

通過應(yīng)用 grid-area 屬性指定網(wǎng)格空間的名稱來定義網(wǎng)格模板。 值:

  1. : 指定的網(wǎng)格空間的名稱 grid-area

  2. : 表示一個(gè)空的網(wǎng)格單元

  3. none: 沒有定義網(wǎng)格空間

.container{
  grid-template-areas: " | . | 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;
}

CSS中Gird布局的示例分析

注意: 你不是用這個(gè)語法命名行只是空間, 當(dāng)你使用這種語法時(shí), 空間兩端的行實(shí)際上是自動(dòng)命名的,如果你的網(wǎng)格空間名字是foo,那么這個(gè)空間的起始行和起始列的名字就是foo-start,最后一列和最后一行就是foo-end;

grid-template

一個(gè)簡短設(shè)置 grid-template-rows , grid-template-columns 和 grid-template-areas 在一起的聲明

.container {
  grid-template: none | subgrid |  / ;
}

由于 grid-template 不會(huì)重置隱式網(wǎng)格屬性( grid-auto-columns , grid-auto-rows , grid-auto-flow ),這可能是您在大多數(shù)情況下所要做的,所以建議使用 grid 屬而不是 grid-template 。

grid-column-gap grid-row-gap

指定網(wǎng)格線的大小 值:

: 長度值

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

CSS中Gird布局的示例分析 

grid-gap

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

: 長度值

.container {
  grid-gap: 
}

justify-items

沿著行軸對齊網(wǎng)格內(nèi)的內(nèi)容(而不是 align-items 沿著列軸對齊),適用于所有網(wǎng)格容器內(nèi)的網(wǎng)格項(xiàng)目 值:

  1. start: 將內(nèi)容對齊到網(wǎng)格區(qū)域的左端

  2. end: 將內(nèi)容對齊到網(wǎng)格區(qū)域的右端

  3. center: 將網(wǎng)格區(qū)域中心的內(nèi)容對齊

  4. stretch: 填充網(wǎng)格區(qū)域的整個(gè)寬度

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

例子

.container{
  justify-items: start;
}

CSS中Gird布局的示例分析 

.container{
  justify-items: end;
}

CSS中Gird布局的示例分析

.container{
  justify-items: center;
}

CSS中Gird布局的示例分析

.container{
  justify-items: stretch;
}

CSS中Gird布局的示例分析

此行為也可以通過 justify-self 在個(gè)別網(wǎng)格項(xiàng)目上設(shè)置

align-items

沿列軸對齊網(wǎng)格的內(nèi)容(而不是 justify-items 沿著行軸對齊)。該值適用于容器內(nèi)的所有網(wǎng)格項(xiàng)目 值:

  1. start: 將內(nèi)容對齊到網(wǎng)格空間的頂部

  2. end: 將內(nèi)容對齊到網(wǎng)格空間的底部

  3. center: 將內(nèi)容對齊到網(wǎng)格空間的中心

  4. stretch: 填充網(wǎng)格空間的整個(gè)高度

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

例子

.container {
  align-items: start;
}

CSS中Gird布局的示例分析

.container {
  align-items: end;
}

CSS中Gird布局的示例分析

.container {
  align-items: center;
}

CSS中Gird布局的示例分析

.container {
  align-items: stretch;
}

CSS中Gird布局的示例分析 

此行為也可以通過 align-self

屬性在個(gè)別網(wǎng)格項(xiàng)目上設(shè)置

justify-content

有時(shí),網(wǎng)格的總大小可能小于其網(wǎng)格容器的大小, 如果您的所有網(wǎng)格項(xiàng)目都是用非靈活單位進(jìn)行大小調(diào)整,就可能發(fā)生這種情況。這時(shí)候可以設(shè)置網(wǎng)格容器內(nèi)的網(wǎng)格的對齊方式,此屬性沿著行軸對齊網(wǎng)絡(luò) 值:

  1. start: 將網(wǎng)格對齊到網(wǎng)格容器的左端

  2. end: 將網(wǎng)格對齊到網(wǎng)格容器的右端

  3. center: 將網(wǎng)格對齊到網(wǎng)格容器的中心

  4. stretch: 調(diào)整網(wǎng)格的大小以允許網(wǎng)格填充網(wǎng)格容器的整個(gè)寬度

  5. space-around: 在每個(gè)網(wǎng)格項(xiàng)目之間分配一個(gè)均勻的空間,在兩個(gè)端分配一半的空間

  6. space-between: 在每個(gè)網(wǎng)格項(xiàng)目之間分配一個(gè)均勻的空間,在兩個(gè)端沒有分配空間

  7. space-evenly:在每個(gè)網(wǎng)格項(xiàng)目之間分配一個(gè)均勻的空間,包括兩個(gè)遠(yuǎn)端 例子

.container{
  justify-content: start;
}

CSS中Gird布局的示例分析

.container{
  justify-content: end;
}

CSS中Gird布局的示例分析

.container{
  justify-content: center;
}

CSS中Gird布局的示例分析

.container{
  justify-content: stretch
}

CSS中Gird布局的示例分析 

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

CSS中Gird布局的示例分析

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

CSS中Gird布局的示例分析

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

CSS中Gird布局的示例分析 

align-content

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

  1. start: 將網(wǎng)格對齊到網(wǎng)格容器的頂部

  2. end: 將網(wǎng)格對齊到網(wǎng)格容器的底部

  3. cneter: 將網(wǎng)格對齊到網(wǎng)格容器的中心

  4. stretch: 調(diào)整網(wǎng)格項(xiàng)目的大小, 以允許網(wǎng)格項(xiàng)目填充網(wǎng)格容器的整個(gè)高度

  5. space-around: 在每個(gè)網(wǎng)格項(xiàng)目之間分配均勻的空間,在兩端分配一半的空間

  6. sapce-between: 在每個(gè)網(wǎng)格項(xiàng)目之間分配一個(gè)均勻的空間,在兩端沒有空間

  7. space-evenly: 在每個(gè)項(xiàng)目之間分配一個(gè)均勻的空間, 包括兩端 例子：

.container{
  align-content: start;
}

CSS中Gird布局的示例分析

.container{
  align-content: end
}

CSS中Gird布局的示例分析

.container{
  align-content: center;
}

CSS中Gird布局的示例分析

.container{
  align-content: stretch;
}

CSS中Gird布局的示例分析

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

CSS中Gird布局的示例分析

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

CSS中Gird布局的示例分析

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

CSS中Gird布局的示例分析 

grid-auto-columns grid-auto-rows

指定任何自動(dòng)生成的網(wǎng)格軌道的大小,當(dāng)你明確聲明超出定義的網(wǎng)格空間的行或列(通過grid-template-rows / grid-template-columns)時(shí)間,會(huì)創(chuàng)建隱式網(wǎng)格軌道 值:

: 可以長度, 百分比, 或分?jǐn)?shù)(使用 fr 單位) 如何創(chuàng)建隱式網(wǎng)格軌道, 例子:

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

這樣會(huì)創(chuàng)建一個(gè)2 X 2的網(wǎng)格

CSS中Gird布局的示例分析

但現(xiàn)在如果你使用 grid-column 和 grid-row 定位你的網(wǎng)格項(xiàng)目是這樣的

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

CSS中Gird布局的示例分析

我們告訴 item-b 從第5行開始, 到第6行結(jié)束, 但是我們沒有定義第5行或第6行, 因?yàn)槲覀円昧瞬淮嬖诘男?所以創(chuàng)建了寬度為0的隱式軌道來填補(bǔ)空白,我們可以使用 grid-auto-columns 和 grid-auto-rows 來指定這些隱式軌道的寬度

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

CSS中Gird布局的示例分析

 grid-auto-flow

如果您沒有明確放置在網(wǎng)格上的網(wǎng)格項(xiàng)目,則自動(dòng)分配算法會(huì)自動(dòng)分配這些項(xiàng)目。該屬性控制自動(dòng)分配算法的原理 值:

  1. column: 告訴自動(dòng)分配算法依次填充每行,根據(jù)需要添加新行

  2. row: 告訴自動(dòng)分配算法一次填充每列,根據(jù)需要添加新列

  3. dense: 告訴自動(dòng)分配算法，如果之后出現(xiàn)較小的項(xiàng)目,則嘗試在網(wǎng)格中盡早填充空間

  4. dense可能導(dǎo)致您的項(xiàng)目出現(xiàn)亂序 例子：


  item-a
  item-b
  item-c
  item-d
  item-e

你定義了一個(gè)五行兩列的網(wǎng)格,并設(shè)置 grid-auto-flow 為 row

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

將項(xiàng)目分配在網(wǎng)格容器上,只能為其中的兩個(gè)項(xiàng)目分配空間

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

CSS中Gird布局的示例分析

如果將 grid-auto-flow 設(shè)置為 column

CSS中Gird布局的示例分析 

grid

簡寫為所有設(shè)置下列屬性的單一聲明: grid-template-rows , grid-template-columns , grid-template-areas , grid-auto-rows , grid-auto-columns 和 grid-flow 。

網(wǎng)格項(xiàng)目的屬性

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

通過引用特定的網(wǎng)格線來確定網(wǎng)格內(nèi)項(xiàng)目的位置。 值:

  1. : 可以是一個(gè)數(shù)字來引用一個(gè)編號的網(wǎng)格線,或者一個(gè)名稱來引用一個(gè)命名的網(wǎng)格線

  2. span : 項(xiàng)目將跨越提供的網(wǎng)格軌道數(shù)量

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

  4. auto: 自動(dòng)分配

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

CSS中Gird布局的示例分析

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

CSS中Gird布局的示例分析

如果沒有 grid-column-end / grid-row-end 聲明, 該項(xiàng)目將默認(rèn)跨越一個(gè)項(xiàng)目,項(xiàng)目可以相互重疊,您可以使用 z-index 來控制堆疊順序

grid-column, grid-row

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

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

CSS中Gird布局的示例分析 

grid-area

為項(xiàng)目提供一個(gè)名稱,以便可以通過使用 grid-template-areas 屬性創(chuàng)建的模板來引用他?；蛘邔傩钥梢杂米?grid-row-start + grid-column-start + grid-row-end + grid-column-end 值:

  1. : 你選擇的名稱

  2. / / / :可以是數(shù)字或命名行

.item {
  grid-area:   |  /  /  / ;
}

例子: 作為項(xiàng)目分配名稱的一種方法

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

CSS中Gird布局的示例分析 

justify-self

沿著行軸對齊網(wǎng)格的內(nèi)容,此屬性適用與單個(gè)網(wǎng)格項(xiàng)目的內(nèi)容 值:

  1. start: 將內(nèi)容對齊到網(wǎng)格空間的左端

  2. end: 將內(nèi)容對齊到網(wǎng)格空間的右端

  3. center: 將網(wǎng)格空間中心的內(nèi)容對齊

  4. stretch: 填充網(wǎng)格空間的整個(gè)寬度

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

例子:

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

CSS中Gird布局的示例分析

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

CSS中Gird布局的示例分析

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

CSS中Gird布局的示例分析 

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

CSS中Gird布局的示例分析

 align-self

沿列軸對齊網(wǎng)格內(nèi)的內(nèi)容,此值適用與單個(gè)網(wǎng)格項(xiàng)目內(nèi)的內(nèi)容 值

start: 將內(nèi)容對齊到網(wǎng)格空間的頂部

end: 將內(nèi)容對齊到網(wǎng)格空間的底部

center: 將網(wǎng)格空間中心的內(nèi)容對齊

stretch: 填充網(wǎng)格空間的整個(gè)高度

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

例子:

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

CSS中Gird布局的示例分析 

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

CSS中Gird布局的示例分析

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

CSS中Gird布局的示例分析

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

CSS中Gird布局的示例分析 

以上是“CSS中Gird布局的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！


網(wǎng)站標(biāo)題：CSS中Gird布局的示例分析
文章路徑：http://weahome.cn/article/giijig.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部