摘要:瀏覽器兼容性可以看出網格布局從,開始受到支持。當這些項目不是網格容器的直接子級元素時,它們不會參與到網格布局中,并顯示為正常的文檔流。
瀏覽器兼容性
可以看出CSS網格布局從Safari 10.1, Firefox 52, Chrome 60,Edge 15開始受到支持。
網格布局頁面基本元素:
OneTwoThreeFourFive
樣式:
.wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .box { border: 2px solid #FDC180; }
通過在元素上聲明 display:grid 或 display:inline-grid 來創建一個網格容器:
.wrapper { display: grid; }
如下效果:
定義網格中的行和列通過 grid-template-columns和grid-template-rows屬性來定義網格中的行和列。這些屬性定義了網格的軌道。網格軌道是網格中任意兩條線之間的空間。
如下網格,包含了三個200像素寬的列軌道:
.wrapper { display: grid; grid-template-columns: 200px 200px 200px; }fr單位
新的fr單位代表網格容器中可用空間的一等份。下一個網格定義將創建三個相等寬度的軌道,這些軌道會隨著可用空間增長和收縮。
.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; }
也可以和像素單位混用:
.wrapper { display: grid; grid-template-columns: 500px 1fr 2fr; }在軌道清單中使用repeat()
repeat 的語法如下:
repeat(number of columns/rows, the column width we want);
有著多軌道的大型網格可使用 repeat() 標記來重復部分或整個軌道列表。如下方的網格定義:
.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; }
可以寫成:
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); }
Repeat 語句可以用于重復軌道列表中的一部分。在下面的例子中我創建了一個網格:它起始軌道為20像素,接著重復了6個1fr的軌道,最后再添加了一個20像素的軌道。
.wrapper { display: grid; grid-template-columns: 20px repeat(6, 1fr) 20px; }
Repeat 語句可以傳入一個軌道列表,因此你可以用它來創建一個多軌道模式的重復軌道列表。在下一個例子中,網格將有共計10個軌道,為1個1fr軌道后面跟著1個2fr軌道,該模式重復5次。
.wrapper { display: grid; grid-template-columns: repeat(5, 1fr 2fr); }grid-auto-rows 和 grid-auto-columns
創建上文中網格例子的時候,我們用 grid-template-columns 屬性定義了自己的列軌道,但是卻讓網格按所需的內容創建行,這些行會被創建在隱式網格中。顯式網格包含了你在 grid-template-columns 和 grid-template-rows 屬性中定義的行和列。如果你在網格定義之外又放了一些東西,或者因為內容的數量而需要的更多網格軌道的時候,網格將會在隱式網格中創建行和列。按照默認,這些軌道將自動定義尺寸,所以會根據它里面的內容改變尺寸。
可以在隱式網格中用 grid-auto-rows 和 grid-auto-columns 屬性來定義一個設置大小尺寸的軌道。
在下面的例子中我們用 grid-auto-rows 屬性來確保在隱式網格中創建的軌道是200像素高。
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }minmax()
在設置一個顯式的網格或者定義自動創建的行和列的大小的時候,我們也許想給網格一個最小的尺寸,但要確保他們能擴大到容納他里面添加的內容。舉個例子,我想讓我的行的高度永遠不會縮小到100像素以下,但是如果我的內容延伸到300像素高了我想讓我的行高也延伸到這個高度。
網格用minmax()函數來解決這個問題。在下一個例子中我用minmax()作為grid-auto-rows的值。自動創建的行高將會是最小100像素,最大為auto。用auto意味著行的尺寸將會根據內容的大小來自動變換:根據本行中最高的單元,把空間擴展到足夠容納該單元。
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); }
跨軌道放置網格項目OneTwoI have some more content in.
This makes me taller than 100 pixels.
ThreeFourFive
如下有四條縱向的網格線和三條橫向的網格線:
使用了grid-column-start, grid-column-end, grid-row-start 和 grid-row-end 屬性,把前兩個元素放到了我們的三列網格中。從左至右,第一個元素從列線1開始,延伸至列線4,也就是我們這個例子中最右邊的列線。并從行線1延伸到行線3,占據了兩個行軌道。
第二個元素從列線1開始,延伸了一個軌道。因為這是默認行為,所以我不用指定結束線。并且它從行線3到行線5,跨越了兩個行軌道。剩下的元素會把自己安放到網格空余的空間中。
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; }網格間距
在兩個網格單元之間的 網格橫向間距 或 網格縱向間距可使用 grid-column-gap 和 grid-row-gap 屬性來創建,或者直接使用兩個合并的縮寫形式 grid-gap。在下面的例子中,我會創建一個橫向間距為10px、縱向間距為1em的網格元素。
嵌套網格一個網格項目可以也成為一個網格容器。在接下來的例子中我事先有了一個3列的網格元素,并有兩個跨軌道的網格。在這個例子中,第一個網格項目含有幾個子級項目。當這些項目不是網格容器的直接子級元素時,它們不會參與到網格布局中,并顯示為正常的文檔流。
html:
abcTwoThreeFourFive
css:
.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } .box { border: 2px solid #FDC180; background: #FFD7A4; padding: 10px; color: #FB2E10; } .nested { border: 2px solid #FFF1A2; background: #FFFAD9; }
如果我把 box1 設置成 display: grid 我可以給它定義軌道然后它也會變成一個網格元素,它的子級元素也會排列在這個新網格元素中。
.box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; display: grid; grid-template-columns: repeat(3, 1fr); }
參考文章:
https://www.w3cplus.com/css3/...
https://developer.mozilla.org...
http://caibaojian.com/fr.html
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/112793.html
摘要:的個值表示三列,相應的數值表示列寬即都為。嘗試其它布局把移到右邊實現后的效果使用點來創建空白的網格單元格實現效果真正的響應式布局假設你想在移動設備上查看的是標題旁邊是菜單。 常用Grid布局屬性介紹 下面從一個簡單Grid布局例子說起。 CSS Grid 布局由兩個核心組成部分是 wrapper(父元素)和 items(子元素)。 wrapper 是實際的 grid(網格),items...
摘要:最精彩的地方在于所有的響應特性被添加到了一行代碼中?;A響應單位柵格布局帶來了一個全新的值單位,單位通常簡寫為,它允許你根據需要將容器拆分為多個塊。 原文地址: https://medium.com/free-code-...原文作者: Per Harald Borgen 翻譯作者: hanxiansen showImg(https://segmentfault.com/img/re...
摘要:瀏覽器已經宣布將支持標準的語法,但暫未支持。重復網格區域的名稱導致內容擴展到這些單元格。點號表示一個空單元格。中間一行將由兩個區域一個空單元格和一個區域組成。只要這些點號之間沒有空格,他們就代表了一個單一的單元格。 by Chris House 譯者:若愚老師想要更好的閱讀體驗可在饑人谷技術博客 查看原文 CSS 網格布局(Grid Layout) 是CSS中最強大的布局系統。 這是一...
摘要:重復網格區域的名稱導致內容跨越這些單元格。中間一排將由兩個區域,一個是空單元格,一個區域組成。你可以使用任意數量的相鄰的點來聲明單個空單元格。只要這些點之間沒有空隙隔開,他們就代表一個單獨的單元格。? CSS Grid 布局是 CSS 中最強大的布局系統。與 flexbox 的一維布局系統不同,CSS Grid 布局是一個二維布局系統,也就意味著它可以同時處理列和行。通過將 CSS 規則應用...
閱讀 3110·2021-11-10 11:36
閱讀 3312·2021-10-13 09:40
閱讀 6050·2021-09-26 09:46
閱讀 661·2019-08-30 15:55
閱讀 1409·2019-08-30 15:53
閱讀 1579·2019-08-29 13:55
閱讀 2997·2019-08-29 12:46
閱讀 3204·2019-08-29 12:34