首頁 > 博客列表 > grid容器、項(xiàng)目屬性及案例

博主信息

博文 34

粉絲 0

評論 0

訪問量 28641

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

grid容器、項(xiàng)目屬性

容器屬性

grid布局三步：
1.創(chuàng)建grid容器
display: grid

2.劃分網(wǎng)格單元
grid-template-columns列設(shè)置
grid-template-rows行設(shè)置
如：

grid-template-columns:10em 10em 10em;
grid-template-rows:10em 10em 10em;

可簡化為：

grid-template-columns:repeat(3,10em);
grid-template-rows:repeat(3,10em);

3.將項(xiàng)目放到指定的網(wǎng)格單元中
grid-area

通過grid-row/grid-column可自定義項(xiàng)目位置顯示在任何位置，如：

grid-row:2/3;
grid-column:2/3;

網(wǎng)格區(qū)域：由一個(gè)或多個(gè)單元構(gòu)成的空間，如：

grid-row:2/4;
grid-column:2/4;

當(dāng)網(wǎng)格過多時(shí)，可以通過span指定跨越行/列的數(shù)量，如：

grid-row:2/span2;
grid-column:2/span2;

grid-area直接定義網(wǎng)格區(qū)域，如：
grid-area：行開始/列開始/行結(jié)束/列結(jié)束
grid-area：2/2/span2/span2

項(xiàng)目屬性

4.排列方式：（默認(rèn)行優(yōu)先）
grid-auto-flow: row行優(yōu)先
grid-auto-flow: column列優(yōu)先

5.隱式網(wǎng)格的行、列大小
grid-auto-rows新生成的項(xiàng)目，自動放入自動生成的網(wǎng)格單元中，并與新單元的寬度自適應(yīng)

6.行與列的間隙
gap行間距、列間距,如：
gap:5px 10px;

7.對齊方式
place-content:所有項(xiàng)目在容器中的對齊方式（垂直水平），須有剩余空間
place-content:start start ;默認(rèn)
place-content:center end ;居中靠右
place-content:center center ;居中居中

剩余空間還可以在項(xiàng)目之間分配
place-content: space-between space-around;

8.place-items項(xiàng)目在網(wǎng)格單元中對齊方式
place-items: center;

9.place-self設(shè)置某個(gè)項(xiàng)目的對齊方式
place-self: end;

案例

<body>
    <div class="container">
         <div class="item"></div>
    </div>
    <style>
        .container {
            width: 30em;
            height: 30em;
            background-color:bisque;
            display: grid;
            grid-template-columns:repeat(3,10em);
            grid-template-rows:repeat(3,10em);
        }
        .container > .item {
            background-color:violet;
            grid-area:2/2/span2/span2;
        }
    </style>
</body>

1.display: grid屬性
2.grid-template-columns/grid-template-rows屬性
3.grid-area屬性

4.grid-auto-flow屬性

.container {
    width: 30em;
    height: 30em;
    background-color:bisque;
    display: grid;
    grid-template-columns:repeat(3,10em);
    grid-template-rows:repeat(3,10em);
    grid-auto-flow: column
}

5.grid-auto-rows屬性

.container {
    width: 30em;
    height: 30em;
    background-color:bisque;
    display: grid;
    grid-template-columns:repeat(3,10em);
    grid-template-rows:repeat(3,10em);
    grid-auto-rows: 10em;
}

6.gap屬性

 .container {
     width: 30em;
     height: 30em;
     background-color:bisque;
     display: grid;
     grid-template-columns:repeat(3,10em);
     grid-template-rows:repeat(3,10em);
     grid-auto-rows: 10em;
     gap:5px 10px ;
 }

7.place-content屬性

 .container {
     width: 30em;
     height: 30em;
     width: 35em;
     height: 40em;
     background-color:bisque;
     display: grid;
     grid-template-columns:repeat(3,10em);
     grid-template-rows:repeat(3,10em);
     /* grid-auto-flow: column */
     /* grid-auto-rows: 10em; */
     /* gap:5px 10px ; */
     place-content:center center ;
 }

8.place-items屬性

.container {
    width: 30em;
    height: 30em;
    width: 35em;
    height: 40em;
    background-color:bisque;
    display: grid;
    grid-template-columns:repeat(3,10em);
    grid-template-rows:repeat(3,10em);
    /* grid-auto-flow: column */
    /* grid-auto-rows: 10em; */
    /* gap:5px 10px ; */
    place-content:start start ;
    place-content:center end ;
    place-content:center center ;
    place-content: space-between space-around;
    place-items: center;
}

9.place-self屬性

.container > .item:nth-last-of-type(5){
    background-color: aqua;
    place-self: end;
}

批改老師：

PHPz

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！

全部評論文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議

0條評論

作者最新博文

markdown語法學(xué)習(xí)及代碼展示

2022-07-02 17:47:31

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

grid容器、項(xiàng)目屬性

容器屬性

項(xiàng)目屬性

案例