資訊專欄INFORMATION COLUMN
摘要：因而我們可以設置整個部分垂直居中和水平居中其他的對齊方式和中展現的類似，在此不再贅述。如上所述，使用這個屬性可以使某個子元素占據在容器元素屬性中定義的區域可以看到，號元素占據了區域。
參考資料：https://www.bilibili.com/video/BV1Bk4y197xm
從某種程度上說，grid布局是flex布局的升級版，主要用于元素在平面上的布局，例如我當前博客皮膚主頁上每個隨筆卡片的排布：
bilibili首頁上圖片鏈接的排版：
可以看出，grid布局往往用于在平面上排列元素，而且可以達到不錯的效果。
這也是grid布局和flex布局的主要差異，即：
和flex布局類似，grid布局也涉及容器元素和子元素，我們可能需要在兩種元素內都設置相應的css屬性才能得到希望的結果。
grid布局中的基本概念如下圖所示：
要啟用grid布局，和flex布局一樣，只需要修改容器元素的displaycss屬性為grid即可，如：
.grid-container { display: grid;}首先是grid-template-columns，它可以用于設置當前排列元素有多少列以及每列的寬度，例如設置：
.grid-container { display: grid; grid-template-columns: 100px 100px 100px; ...}這樣設置代表排列元素為三列，每列的寬度為100px，效果如下：
同理，我們也可以設置排列元素的行數以及每一行的高度：
.grid-container { ... grid-template-rows: 100px 100px 100px 100px;}
調試工具下的效果：
像剛才那樣設置元素的行列可能會遇到一種麻煩的情況，例如如果列數有10列，那么我們則需要寫10次列的寬度，此時我們就可以使用repeat寫法進行簡化，即：
.grid-container { grid-template-columns: repeat(3, 100px); /* => 100px 100px 100px */}第一個參數是數量，第二個參數是大小。
此外，repeat里的第一個參數也可以設置為auto-fill，這樣子元素就會根據父元素的寬度大小進行自適應排列了，例如：
fr可以方便地表示比例關系，和flex布局中給子元素設置flex屬性表示自己的占比類似。
例如在這里希望容器分成三列，并且每列等分容器的寬度，那么我們可以這樣寫：
.grid-container { grid-template-columns: repeat(3, 1fr);}這代表著每行的每個元素都占據一份的剩余空間，因此可以實現三等分的效果：
我們也可以自定義比例，例如：
.grid-container { grid-template-columns: 1fr 2fr 3fr;}
可以看出，各列的寬度變成了1:2:3。
例子如下：
.grid-container { grid-template-columns: 100px auto 100px;}此時代表左右兩列各占用100px寬度，而中間則自動填充滿，這樣既是我們前面使用flex布局所得到的三欄布局：
顯而易見，這兩個屬性都是用于設置子元素之間間距的大小的
例如設置行間距：
.grid-container { ... row-gap: 20px;}
列間距是類似的，這里不贅述了。
此外還可以直接使用gap來簡化兩個間距的設置：
.grid-container { ... gap: 20px;}
這個屬性主要用于設置元素是以行優先還是列優先進行排列的，默認為行優先，因此我們進行這樣的修改：
.grid-container { grid-auto-flow: column;}效果如下：
dense關鍵字
例如一些這種情況：
這里1號和2號元素的寬度都比較大，2號元素無法放在1號元素的右邊，因此1號元素右邊就出現了一個空位，而此時我們希望3號元素能夠向上占據這個空位進行緊密的排列，此時我們就可以在grid-auto-flow屬性后添加dense關鍵字：
.grid-container { grid-auto-flow: row dense;}
可以看到，此時完成了我們緊密排列的需求。
這個屬性用于設置子元素元素在網格內的水平方向上的對齊。
這個屬性即用于設置子元素在規定的網格中是以什么樣的方式進行對齊的，具體效果如上圖所示，其默認值為stretch（拉伸），這也就是為什么我們看到子元素占滿了各自的網格。
同理，這個屬性用于設置子元素元素在網格內的垂直方向上的對齊，這里不展開了。
這個屬性是上面兩個屬性的簡寫，即：
.grid-container { place-items: center center; /* => justify-items:center; align-items: center; */}
這里的“整個內容區域”指的是前面紅色概念圖中的紅色方框區域，并不是值整個容器，例如原來的例子中的content為下圖綠色邊框包圍的最外圍區域：
因此，這個屬性是用于設置content關于整個容器的對齊關系的。
因而我們可以設置整個部分垂直居中和水平居中：
.grid-container { ... justify-content: center; align-content: center;}
其他的對齊方式和flex中展現的類似，在此不再贅述。
這兩個屬性分別用于設置多出來的項目的寬和高：
使用方式如下案例所示：
.grid-container { grid-template-areas: a b b a c d a e f;}這里區域的命名可以是任意的英文單詞，上面代碼所對應的實際區域為：
這里只是定義區域，在子元素屬性上進行相應的設置可以使該子元素占據某個區域。
簡寫：
.item { grid-column: 1 / 3; /* => grid-column-start: 1; grid-column-end: 3; */}另一種寫法：使用span
.item { grid-column-start: span 2; }代碼的效果和上面相同。
如上所述，使用這個屬性可以使某個子元素占據在容器元素屬性中定義的區域：
.item-1 { grid-area: a;}
可以看到，1號元素占據了a區域。
此外，grid-area還可以用于簡寫上面的item位置設置：
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/123656.html
摘要：布局學習筆記布局學習筆記好久沒有寫博客了上關于布局的知識比較零散正好根據我這幾個月的實踐對布局做一個總結以備查閱基礎用法基礎用法布局的核心屬性有個總的來說布局就是父元素先定義好自己有幾行幾列然后子元素定義自己在第幾行第幾列可CSS Grid 布局學習筆記 好久沒有寫博客了, MDN 上關于 Grid 布局的知識比較零散, 正好根據我這幾個月的實踐對 CSS Grid 布局做一個總結, 以備查...
摘要：你可以用網格這樣做這樣的顯示效果是沒什么錯誤的，當使用網格，重新定義列數非常簡單。絕對定位當我們絕對定位一個網格元素的時候，這個元素會跑到它的容器中，我們可以用和來定位它。最簡單的命名約定使用網格自動編號。 注：此文是我翻譯的第一篇技術文章。適合有一定CSS原生網格布局使用經驗的開發者（讀前需要先去了解一下原生CSS網格的語法），原生CSS網格布局（Native CSS grid）截止...
摘要：你可以用網格這樣做這樣的顯示效果是沒什么錯誤的，當使用網格，重新定義列數非常簡單。絕對定位當我們絕對定位一個網格元素的時候，這個元素會跑到它的容器中，我們可以用和來定位它。最簡單的命名約定使用網格自動編號。 注：此文是我翻譯的第一篇技術文章。適合有一定CSS原生網格布局使用經驗的開發者（讀前需要先去了解一下原生CSS網格的語法），原生CSS網格布局（Native CSS grid）截止...
摘要：前情提要本人是一個學渣非科班入行年了吧前端東西真的好多啊又不斷更新需要不斷的學學學在去年年底開始我就開始不斷的尋找學習的方法如何更加高效的學習如何才能學的又快又好在這半年來不斷的總結慢慢找到了一些方法和訣竅此文章不是網格布局的教學文章只前情提要 ??本人是一個學渣,非科班入行2年了吧,前端東西真的好多啊,又不斷更新.需要不斷的學學學, showImg(https://user-gold-c...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3784·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3557·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00
