成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS Grid 布局學(xué)習(xí)筆記

wpw / 2757人閱讀

摘要：布局學(xué)習(xí)筆記布局學(xué)習(xí)筆記好久沒(méi)有寫博客了上關(guān)于布局的知識(shí)比較零散正好根據(jù)我這幾個(gè)月的實(shí)踐對(duì)布局做一個(gè)總結(jié)以備查閱基礎(chǔ)用法基礎(chǔ)用法布局的核心屬性有個(gè)總的來(lái)說(shuō)布局就是父元素先定義好自己有幾行幾列然后子元素定義自己在第幾行第幾列可

CSS Grid 布局學(xué)習(xí)筆記

好久沒(méi)有寫博客了, MDN 上關(guān)于 Grid 布局的知識(shí)比較零散, 正好根據(jù)我這幾個(gè)月的實(shí)踐對(duì) CSS Grid 布局做一個(gè)總結(jié), 以備查閱.

1. 基礎(chǔ)用法

Grid 布局的核心屬性有5個(gè):

.parent {
    display: grid;
    grid-template-colomns: 30px 1fr;
    grid-template-rows: repeat(3, 30px) 1fr;
    & > .child {
        grid-column: 1 / 3;
        grid-row: 1;
    }
}

總的來(lái)說(shuō), Grid 布局就是: 父元素先定義好自己有幾行幾列. 然后, 子元素定義自己在第幾行第幾列(可以跨越多行或者多列).

其中, display 屬性大家應(yīng)該很熟悉了吧? 這里不再多說(shuō).

repeat函數(shù)表示將1個(gè)css值重復(fù)n遍.

gird-column可以拆分為grid-column-start和grid-column-end兩個(gè)屬性.

gird-row可以拆分為grid-row-start和grid-row-end兩個(gè)屬性.

參考:

  • grid-template-columns
  • grid-template-rows
  • grid-column
  • grid-row

2. grid-template-areas和grid-area

grid-template-areas這個(gè)屬性其實(shí)有點(diǎn)象形文字的意思.


.parent {
    display: grid;
    grid-template-colomns: 100px 1fr;
    grid-template-rows: 1fr 50px;
    grid-template-areas:
        "nav    content"
        "footer footer ";

    & > .item1 {
      grid-area: nav;
    }
    & > .item2 {
      grid-area: content;
    }
    & > .item3 {
      grid-area: footer;
    }
}

上面我們將父元素分成了4格. 然后將左上的格子命名為nav, 右上的格子命名為content, 底部的格子命名為footer.

最后, 我們只需要在子元素中指定自己屬于哪個(gè)區(qū)域就可以了.

這樣寫有一個(gè)好處: 我們?cè)僖膊挥脤懣菰镫y懂的grid-column和grid-row了, 可以給自己的區(qū)域起一個(gè)語(yǔ)義化的名字

參考:

  • grid-template-areas
  • grid-area

3. row-gap, colomns-gap, grid-gap

類似各種框架（Bootstrap, Element, iView）, Grid 布局也支持行間距和列間距.

grid-gap是row-gap和colomns-gap的合并.

grid-gap也可以簡(jiǎn)寫為gap.

注意: colomns-gap 的默認(rèn)值是 normal, 表示列間距為1em

參考:

  • column-gap
  • row-gap

4. grid-auto-columns和grid-auto-rows

如果你事先不知道你的網(wǎng)格有幾行(有幾列), 這兩個(gè)屬性可以幫到你. 就像字面意思一樣, 這個(gè)屬性表示自增長(zhǎng)的網(wǎng)格行(列)的高度(寬度)

尤其是當(dāng)你渲染一個(gè)不定長(zhǎng)度的列表的時(shí)候, 這個(gè)屬性會(huì)非常有用.

例如:

.parent {
    display: grid;
    grid-template-colomns: 1fr;
    grid-auto-rows: 100px;

    & > .child {
        grid-column: 1;
    }
}

參考:

  • grid-auto-columns
  • grid-auto-rows

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1966.html

相關(guān)文章

  • (譯)原生CSS網(wǎng)格布局學(xué)習(xí)筆記

    摘要：你可以用網(wǎng)格這樣做這樣的顯示效果是沒(méi)什么錯(cuò)誤的，當(dāng)使用網(wǎng)格，重新定義列數(shù)非常簡(jiǎn)單。絕對(duì)定位當(dāng)我們絕對(duì)定位一個(gè)網(wǎng)格元素的時(shí)候，這個(gè)元素會(huì)跑到它的容器中，我們可以用和來(lái)定位它。最簡(jiǎn)單的命名約定使用網(wǎng)格自動(dòng)編號(hào)。 注：此文是我翻譯的第一篇技術(shù)文章。適合有一定CSS原生網(wǎng)格布局使用經(jīng)驗(yàn)的開(kāi)發(fā)者（讀前需要先去了解一下原生CSS網(wǎng)格的語(yǔ)法），原生CSS網(wǎng)格布局（Native CSS grid）截止...

    v1 評(píng)論0 收藏0

  • (譯)原生CSS網(wǎng)格布局學(xué)習(xí)筆記

    摘要：你可以用網(wǎng)格這樣做這樣的顯示效果是沒(méi)什么錯(cuò)誤的，當(dāng)使用網(wǎng)格，重新定義列數(shù)非常簡(jiǎn)單。絕對(duì)定位當(dāng)我們絕對(duì)定位一個(gè)網(wǎng)格元素的時(shí)候，這個(gè)元素會(huì)跑到它的容器中，我們可以用和來(lái)定位它。最簡(jiǎn)單的命名約定使用網(wǎng)格自動(dòng)編號(hào)。 注：此文是我翻譯的第一篇技術(shù)文章。適合有一定CSS原生網(wǎng)格布局使用經(jīng)驗(yàn)的開(kāi)發(fā)者（讀前需要先去了解一下原生CSS網(wǎng)格的語(yǔ)法），原生CSS網(wǎng)格布局（Native CSS grid）截止...

    Warren 評(píng)論0 收藏0

  • CSS學(xué)習(xí)筆記：grid布局

    摘要：因而我們可以設(shè)置整個(gè)部分垂直居中和水平居中其他的對(duì)齊方式和中展現(xiàn)的類似，在此不再贅述。如上所述，使用這個(gè)屬性可以使某個(gè)子元素占據(jù)在容器元素屬性中定義的區(qū)域可以看到，號(hào)元素占據(jù)了區(qū)域。目錄一、Grid布局簡(jiǎn)介二、Grid布局的一些概念三、 容器元素屬性1. grid-template-*1.1 網(wǎng)格行和列的設(shè)置1.2 repeat的使用1.3 使用fr1.4 auto關(guān)鍵字2. row-gap...

    番茄西紅柿 評(píng)論0 收藏2637

  • 學(xué)不動(dòng)了?可能方法不太對(duì)-Grid 網(wǎng)格布局

    摘要：前情提要本人是一個(gè)學(xué)渣非科班入行年了吧前端東西真的好多啊又不斷更新需要不斷的學(xué)學(xué)學(xué)在去年年底開(kāi)始我就開(kāi)始不斷的尋找學(xué)習(xí)的方法如何更加高效的學(xué)習(xí)如何才能學(xué)的又快又好在這半年來(lái)不斷的總結(jié)慢慢找到了一些方法和訣竅此文章不是網(wǎng)格布局的教學(xué)文章只前情提要 ??本人是一個(gè)學(xué)渣,非科班入行2年了吧,前端東西真的好多啊,又不斷更新.需要不斷的學(xué)學(xué)學(xué), showImg(https://user-gold-c...

    happyfish 評(píng)論0 收藏0

  • HTML-CSS

    摘要：但是，從字體上來(lái)說(shuō)雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 ...

    xiaokai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<