亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

番茄西紅柿 / 3422人閱讀

摘要：因而我們可以設(shè)置整個(gè)部分垂直居中和水平居中其他的對(duì)齊方式和中展現(xiàn)的類似，在此不再贅述。如上所述，使用這個(gè)屬性可以使某個(gè)子元素占據(jù)在容器元素屬性中定義的區(qū)域可以看到，號(hào)元素占據(jù)了區(qū)域。

參考資料：https://www.bilibili.com/video/BV1Bk4y197xm

一、Grid布局簡(jiǎn)介

從某種程度上說，grid布局是flex布局的升級(jí)版，主要用于元素在平面上的布局，例如我當(dāng)前博客皮膚主頁(yè)上每個(gè)隨筆卡片的排布：

image-20211117143841375

bilibili首頁(yè)上圖片鏈接的排版：

image-20211117144048876

可以看出，grid布局往往用于在平面上排列元素，而且可以達(dá)到不錯(cuò)的效果。

這也是grid布局和flex布局的主要差異，即：

  • flex布局一般用于一個(gè)維度排布元素項(xiàng)（item），例如橫向或縱向一個(gè)方向排布
  • grid布局主要用于在整個(gè)平面上（二維）對(duì)元素項(xiàng)進(jìn)行排布，例如單子商城的各個(gè)商品項(xiàng)，文章管理系統(tǒng)的各個(gè)文章，使用grid布局可以達(dá)到非常好的瀏覽效果。

二、Grid布局的一些概念

和flex布局類似，grid布局也涉及容器元素和子元素，我們可能需要在兩種元素內(nèi)都設(shè)置相應(yīng)的css屬性才能得到希望的結(jié)果。

grid布局中的基本概念如下圖所示：

image-20211117145236179

要啟用grid布局，和flex布局一樣，只需要修改容器元素的displaycss屬性為grid即可，如：

.grid-container {    display: grid;}

三、 容器元素屬性

1. grid-template-*

1.1 網(wǎng)格行和列的設(shè)置

首先是grid-template-columns，它可以用于設(shè)置當(dāng)前排列元素有多少列以及每列的寬度，例如設(shè)置：

.grid-container {    display: grid;    grid-template-columns: 100px 100px 100px;    ...}

這樣設(shè)置代表排列元素為三列，每列的寬度為100px，效果如下：

image-20211117151113497

同理，我們也可以設(shè)置排列元素的行數(shù)以及每一行的高度：

.grid-container {    ...    grid-template-rows: 100px 100px 100px 100px;}

image-20211117151234599

調(diào)試工具下的效果：

image-20211117151431048

1.2 repeat的使用

像剛才那樣設(shè)置元素的行列可能會(huì)遇到一種麻煩的情況，例如如果列數(shù)有10列，那么我們則需要寫10次列的寬度，此時(shí)我們就可以使用repeat寫法進(jìn)行簡(jiǎn)化，即：

.grid-container {    grid-template-columns: repeat(3, 100px); /* => 100px 100px 100px */}

第一個(gè)參數(shù)是數(shù)量，第二個(gè)參數(shù)是大小。

此外，repeat里的第一個(gè)參數(shù)也可以設(shè)置為auto-fill，這樣子元素就會(huì)根據(jù)父元素的寬度大小進(jìn)行自適應(yīng)排列了，例如：

  • 容器寬度為600px
    image-20211117152305766
  • 容器寬度為400px
    image-20211117152505217

1.3 使用fr

fr可以方便地表示比例關(guān)系，和flex布局中給子元素設(shè)置flex屬性表示自己的占比類似。

例如在這里希望容器分成三列，并且每列等分容器的寬度，那么我們可以這樣寫：

.grid-container {    grid-template-columns: repeat(3, 1fr);}

這代表著每行的每個(gè)元素都占據(jù)一份的剩余空間，因此可以實(shí)現(xiàn)三等分的效果：

image-20211117153130160

我們也可以自定義比例，例如：

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

image-20211117153244609

可以看出，各列的寬度變成了1:2:3。

1.4 auto關(guān)鍵字

例子如下：

.grid-container {    grid-template-columns: 100px auto 100px;}

此時(shí)代表左右兩列各占用100px寬度，而中間則自動(dòng)填充滿，這樣既是我們前面使用flex布局所得到的三欄布局：

image-20211117153728665

2. row-gap, column-gap

顯而易見，這兩個(gè)屬性都是用于設(shè)置子元素之間間距的大小的

  • row-gap設(shè)置行間距
  • column-gap設(shè)置列間距

例如設(shè)置行間距：

.grid-container {    ...    row-gap: 20px;}

image-20211117154511168

列間距是類似的，這里不贅述了。

此外還可以直接使用gap來簡(jiǎn)化兩個(gè)間距的設(shè)置：

.grid-container {    ...    gap: 20px;}

image-20211117154715585

3. grid-auto-flow

這個(gè)屬性主要用于設(shè)置元素是以行優(yōu)先還是列優(yōu)先進(jìn)行排列的，默認(rèn)為行優(yōu)先，因此我們進(jìn)行這樣的修改：

.grid-container {    grid-auto-flow: column;}

效果如下：

image-20211117155359205

dense關(guān)鍵字

例如一些這種情況：

image-20211117155659251

這里1號(hào)和2號(hào)元素的寬度都比較大，2號(hào)元素?zé)o法放在1號(hào)元素的右邊，因此1號(hào)元素右邊就出現(xiàn)了一個(gè)空位，而此時(shí)我們希望3號(hào)元素能夠向上占據(jù)這個(gè)空位進(jìn)行緊密的排列，此時(shí)我們就可以在grid-auto-flow屬性后添加dense關(guān)鍵字：

.grid-container {    grid-auto-flow: row dense;}

image-20211117155915580

可以看到，此時(shí)完成了我們緊密排列的需求。

4. items對(duì)齊

4.1 justify-items

這個(gè)屬性用于設(shè)置子元素元素在網(wǎng)格內(nèi)的水平方向上的對(duì)齊。

image-20211117160122917

這個(gè)屬性即用于設(shè)置子元素在規(guī)定的網(wǎng)格中是以什么樣的方式進(jìn)行對(duì)齊的，具體效果如上圖所示，其默認(rèn)值為stretch（拉伸），這也就是為什么我們看到子元素占滿了各自的網(wǎng)格。

4.2 align-items

同理，這個(gè)屬性用于設(shè)置子元素元素在網(wǎng)格內(nèi)的垂直方向上的對(duì)齊，這里不展開了。

4.3 place-items

這個(gè)屬性是上面兩個(gè)屬性的簡(jiǎn)寫，即：

.grid-container {	place-items: center center; /* => justify-items:center; align-items: center; */}

5. content對(duì)齊

image-20211117160835686

這里的“整個(gè)內(nèi)容區(qū)域”指的是前面紅色概念圖中的紅色方框區(qū)域，并不是值整個(gè)容器，例如原來的例子中的content為下圖綠色邊框包圍的最外圍區(qū)域：

image-20211117161052008

因此，這個(gè)屬性是用于設(shè)置content關(guān)于整個(gè)容器的對(duì)齊關(guān)系的。

因而我們可以設(shè)置整個(gè)部分垂直居中和水平居中：

.grid-container {    ...    justify-content: center;    align-content: center;}

image-20211117161359160

其他的對(duì)齊方式和flex中展現(xiàn)的類似，在此不再贅述。

6. grid-auto-columns/grid-auto-rows

這兩個(gè)屬性分別用于設(shè)置多出來的項(xiàng)目的寬和高：

image-20211117161705490

7. 定義區(qū)域

使用方式如下案例所示：

.grid-container {    grid-template-areas:        a b b        a c d        a e f;}

這里區(qū)域的命名可以是任意的英文單詞，上面代碼所對(duì)應(yīng)的實(shí)際區(qū)域?yàn)椋?/p>

image-20211117163224127

這里只是定義區(qū)域，在子元素屬性上進(jìn)行相應(yīng)的設(shè)置可以使該子元素占據(jù)某個(gè)區(qū)域。

四、item（子元素）屬性

1. grid-column，grid-row

image-20211117162055153

簡(jiǎn)寫：

.item {    grid-column: 1 / 3;     /*     =>	grid-column-start: 1;    	grid-column-end: 3;     */}

另一種寫法：使用span

.item {    grid-column-start: span 2; }

代碼的效果和上面相同。

2. grid-area

如上所述，使用這個(gè)屬性可以使某個(gè)子元素占據(jù)在容器元素屬性中定義的區(qū)域：

.item-1 {    grid-area: a;}

image-20211117163441382

可以看到，1號(hào)元素占據(jù)了a區(qū)域。

此外，grid-area還可以用于簡(jiǎn)寫上面的item位置設(shè)置：

image-20211117163741721

3. 定義單個(gè)子元素在網(wǎng)格的對(duì)齊方式

image-20211117163910807

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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

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

  • HTML-CSS

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

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

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

0條評(píng)論

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