響應式布局之grid網格布局

2021-10-11 19:30:49 字數 4312 閱讀 5879

二維布局 更加靈活好用 相對於彈性盒相容性差(ie11以及以上)

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-ofrzqdyj-1607600417627)(media/grid布局容器.png)]

class


="container"


>


class


="item"


>


>


1p>


div>


class


="item"


>


2div


>


class


="item"


>


3div


>


class


="item"


>


4div


>


class


="item"


>


5div


>


class


="item"


>


6div


>


class


="item"


>


7div


>


class


="item"


>


8div


>


class


="item"


>


9div


>


class


="item"


>


10div


>


div>


.container
grid-template-columns


:100px 100px 100px;規定專案在容器排三列，每列100px寬度


grid-template-rows


:100px 100px 100px 100px;規定專案在容器排四行，每行100px寬度
1. repeat() 第乙個引數是重複的次數，第二個引數是要重複的值
grid-template-columns


:repeat


(3,100px)


;grid-template-columns


:repeat


(2,100px 80px 200px)


; 100px 80px 200px 100px 80px 200px; 6列 以3份為一組一樣
2.auto-fill 當單元格大小固定時，容器大小不固定時這個屬性就會自動填充
grid-template-columns


:repeat


(auto-fill,100px)


;
3.fr 為了方便表示比例關係，網格布局提供了fr關鍵字(fraction片段)
grid-template-columns


:repeat


(4,1fr)


;寬度均分為4份


grid-template-columns


:1fr 2fr 3fr;
4.minmax(,)函式產生乙個長度範圍，表示長度就在這個範圍之中
grid-template-columns


:1fr minmax


(150px,1fr)


;//最小不會小於150px
5.auto 表示寬度自動
grid-template-columns


:100px auto 100px; 中間列寬度自動
6.網格線 可以用方括號定義網格線名稱，方便後期定位引用
grid-template-columns


:[c1] 100px [c2] 100px [c3] 100px [c4];
grid-gap


:grid-row-gap grid-column-gap; / gap


:row-gap column-gap;


grid-row-gap


:10px; / row-gap


:10px


grid-column-gap


:20px; /column-gap


:20px;
新的網格布局把該屬性的grid-取消

乙個區域由單個或多個單元格組成，由你決定(具體使用，需要在專案屬性裡面設定)

grid-template-areas


:'a b c'


'd e f'


'g h i'


grid-template-areas


:'a a a'


'b b b'


'c c c'


grid-template-areas


:'a · c'


'd ·f'


'g ·i' 區域不需要利用，則使用點表示 


區域的命名會影響到網格線。每個區域的起始網格線，會自動命名為區域名-start


終止網格線自動命名為區域名-end
劃分網格以後，容器的子元素會按照順序，自動放置在每乙個網格。預設的放置順序是「先行後列」，即先填滿第一行，再開始放入第二行(就是子元素的排放順序)

grid-auto-flow


:row;


grid-auto-flow


:column;


grid-auto-flow


:row dense; dense緊湊布局 (空間利用率較高)


grid-auto-flow


:column dense; dense值用於某些專案指定位置以後，剩下的專案怎麼自動放置
[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-lqhdoax8-1607600417631)(media/dense.png)]

設定單元格內容的水平和垂直對齊方式

justify-items


:start|end|center|stretch（預設值）


align-items


:start|end|center|stretch
place-items


:align-items justify-items;
設定整個內容區域的水平和垂直對齊方式

justify-content


:start/end/center/stretch/space-around/space-between/space-evenly


align-content


:start/end/center/stretch/space-around/space-between/space-evenly
設定多出來(沒有設定的剩餘專案)的大小

3*3 剩餘1個 


grid-auto-rows


:50px;
指定專案具體位置

grid-column-start


:1;grid-column-end


:3;grid-row-start


:1;grid-row-end


:3;
[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-klasuxbz-1607600417633)(media/star-end.png)]

另外一種寫法:（不要記）

grid-column-start


:span 2; span 跨越幾條網格線 從第一條跨越


grid-column-end


:span 2;
指定專案放在哪乙個區域

grid-template-areas


:'a a a'


'b b b'


'c c c'


grid-area


:b;
grid-area:row-start / column-start / row-end/ column-end


grid-area:1/1/3/3; 相當於


grid-column-start:1;


grid-column-end:3;


grid-row-start:1;


grid-row-end:3;

Grid布局（網格布局）

網格布局 grid 是 css 中乙個布局方案。它將網頁劃分成乙個個網格，可以任意組合不同的網格，做出各種各樣的布局。以前，只能通過複雜的 css 框架達到的效果，現在瀏覽器內建了。下面這樣的布局，就是grid布局。grid 布局與 flex 布局有一定的相似性，都可以指定容器內部多個專案的位置。但...

網格布局（grid布局）

他可以將頁面分為多個網格，可以任意組合不同的網格 做出各種各樣的布局。網格布局為二維性質的。grid row gap 1rem 行間距 grid column gap 1rem 列間距 grid gap 1rem 設定行列間距 grid template columns 列寬和列數 grid tem...

Grid網格布局

前言 就目前為止，css的grid和flexbox結合將是解決布局的最佳方案。雖然瀏覽器對css grid和flexbox的屬性未完全支援，但對於實現布局而言，這已是一種非常完美的結合。如果css box alignment module level3能得到更好的支援的話，那麼對於web的布局將是一...