資訊專欄INFORMATION COLUMN
摘要：布局學習筆記布局學習筆記好久沒有寫博客了上關于布局的知識比較零散正好根據我這幾個月的實踐對布局做一個總結以備查閱基礎用法基礎用法布局的核心屬性有個總的來說布局就是父元素先定義好自己有幾行幾列然后子元素定義自己在第幾行第幾列可
好久沒有寫博客了, MDN 上關于 Grid 布局的知識比較零散, 正好根據我這幾個月的實踐對 CSS Grid 布局做一個總結, 以備查閱.
Grid 布局的核心屬性有5個:
.parent {
display: grid;
grid-template-colomns: 30px 1fr;
grid-template-rows: repeat(3, 30px) 1fr;
& > .child {
grid-column: 1 / 3;
grid-row: 1;
}
}總的來說, Grid 布局就是: 父元素先定義好自己有幾行幾列. 然后, 子元素定義自己在第幾行第幾列(可以跨越多行或者多列).
其中, display 屬性大家應該很熟悉了吧? 這里不再多說.
repeat函數表示將1個css值重復n遍.
gird-column可以拆分為grid-column-start和grid-column-end兩個屬性.
gird-row可以拆分為grid-row-start和grid-row-end兩個屬性.
參考:
- grid-template-columns
- grid-template-rows
- grid-column
- grid-row
grid-template-areas和grid-areagrid-template-areas這個屬性其實有點象形文字的意思.
.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.
最后, 我們只需要在子元素中指定自己屬于哪個區域就可以了.
這樣寫有一個好處: 我們再也不用寫枯燥難懂的grid-column和grid-row了, 可以給自己的區域起一個語義化的名字
參考:
- grid-template-areas
- grid-area
row-gap, colomns-gap, grid-gap類似各種框架（Bootstrap, Element, iView）, Grid 布局也支持行間距和列間距.
grid-gap是row-gap和colomns-gap的合并.
grid-gap也可以簡寫為gap.
注意: colomns-gap 的默認值是 normal, 表示列間距為1em
參考:
- column-gap
- row-gap
grid-auto-columns和grid-auto-rows如果你事先不知道你的網格有幾行(有幾列), 這兩個屬性可以幫到你. 就像字面意思一樣, 這個屬性表示自增長的網格行(列)的高度(寬度)
尤其是當你渲染一個不定長度的列表的時候, 這個屬性會非常有用.
例如:
.parent {
display: grid;
grid-template-colomns: 1fr;
grid-auto-rows: 100px;
& > .child {
grid-column: 1;
}
}參考:
- grid-auto-columns
- grid-auto-rows
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1966.html
摘要：你可以用網格這樣做這樣的顯示效果是沒什么錯誤的，當使用網格，重新定義列數非常簡單。絕對定位當我們絕對定位一個網格元素的時候，這個元素會跑到它的容器中，我們可以用和來定位它。最簡單的命名約定使用網格自動編號。 注：此文是我翻譯的第一篇技術文章。適合有一定CSS原生網格布局使用經驗的開發者（讀前需要先去了解一下原生CSS網格的語法），原生CSS網格布局（Native CSS grid）截止...
摘要：你可以用網格這樣做這樣的顯示效果是沒什么錯誤的，當使用網格，重新定義列數非常簡單。絕對定位當我們絕對定位一個網格元素的時候，這個元素會跑到它的容器中，我們可以用和來定位它。最簡單的命名約定使用網格自動編號。 注：此文是我翻譯的第一篇技術文章。適合有一定CSS原生網格布局使用經驗的開發者（讀前需要先去了解一下原生CSS網格的語法），原生CSS網格布局（Native CSS grid）截止...
摘要：因而我們可以設置整個部分垂直居中和水平居中其他的對齊方式和中展現的類似，在此不再贅述。如上所述，使用這個屬性可以使某個子元素占據在容器元素屬性中定義的區域可以看到，號元素占據了區域。目錄一、Grid布局簡介二、Grid布局的一些概念三、 容器元素屬性1. grid-template-*1.1 網格行和列的設置1.2 repeat的使用1.3 使用fr1.4 auto關鍵字2. row-gap...
摘要：前情提要本人是一個學渣非科班入行年了吧前端東西真的好多啊又不斷更新需要不斷的學學學在去年年底開始我就開始不斷的尋找學習的方法如何更加高效的學習如何才能學的又快又好在這半年來不斷的總結慢慢找到了一些方法和訣竅此文章不是網格布局的教學文章只前情提要 ??本人是一個學渣,非科班入行2年了吧,前端東西真的好多啊,又不斷更新.需要不斷的學學學, showImg(https://user-gold-c...
閱讀 2280·2021-11-23 09:51
閱讀 5672·2021-09-22 15:39
閱讀 3348·2021-09-02 15:15
閱讀 3499·2019-08-30 15:54
閱讀 2360·2019-08-30 15:53
閱讀 1400·2019-08-30 14:04
閱讀 2452·2019-08-29 18:33
閱讀 2371·2019-08-29 13:08
