国产一区二区三精品久久久无广告,欧美日韩国产成人高清视频

首頁 > 博客列表 > CSS布局：grid布局基本知識

博主信息

博文 145

粉絲 7

評論 7

訪問量 198511

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

一、網(wǎng)格布局基本概念和術(shù)語

1、grid布局又稱二維網(wǎng)格布局，主要用于快速布局頁面和小區(qū)域
2、網(wǎng)格容器：我們通過在元素上聲明display：grid，來創(chuàng)建一個網(wǎng)格容器。
3、網(wǎng)格容器中的所有直系子元素成為網(wǎng)格元素。
4、網(wǎng)格軌道：我們通過 grid-template-columns 和 grid-template-rows屬性來定義網(wǎng)格中的行和列。這些屬性定義了網(wǎng)格的軌道。一個網(wǎng)格軌道就是網(wǎng)格中任意兩條線之間的空間。
5、網(wǎng)格單元和網(wǎng)格區(qū)域：網(wǎng)格單元有行列（行軌和列軌）交叉的形成的區(qū)域稱為網(wǎng)格單元，網(wǎng)格單元是網(wǎng)格容器中的最小單元。網(wǎng)格元素可以向行或著列的方向擴展一個或多個單元，并且會創(chuàng)建一個網(wǎng)格區(qū)域。網(wǎng)格區(qū)域的形狀應(yīng)該是一個矩形；
6、網(wǎng)格間距：在兩個網(wǎng)格單元之間的網(wǎng)格橫向間距或網(wǎng)格縱向間距

二、網(wǎng)格布局的常見屬性單位

1、網(wǎng)格容器設(shè)置網(wǎng)格的常見屬性值；

屬性名	屬性值	作用
grid-template-rows	px fr em rem %	設(shè)置行軌道高度
grid-template-columns	px fr em rem %	設(shè)置列軌道的寬度
grid-template-areas	常見值;string，一組為一行；例如:grid-template-areas: ‘one one three’’one one six’;	命名網(wǎng)格單元名稱
grid-gap	row column常見單位值：px em rem	設(shè)置各個網(wǎng)格單元之間的（行軌間距和列軌間距）間距
place-items	row column常見值：start center end	設(shè)置項目在網(wǎng)格單元中的對其方式
place-content	row column常見值：start center end	設(shè)置網(wǎng)格單元在容器中的整體對其方式
grid-auto-flow	常見值：row、column	設(shè)置容器中項目單元的布局流向默認行優(yōu)先
frid-auto-rows（columns）	px fr em rem	設(shè)置隱式單元的行高和列寬

示意圖：

2、容器中網(wǎng)格項目常見屬性

屬性	屬性值	作用
grid-area	常見屬性值：命名單元名稱\行號和列號\跨列或者行span	設(shè)置項目在占據(jù)的網(wǎng)格單元的位置和網(wǎng)格區(qū)域
place-self	start\center\end	設(shè)個某個項目在網(wǎng)格單元中排列方式

3、設(shè)置列寬和行高常見的值和函數(shù)：

1、fr:自適應(yīng)容器的寬度和高度，可以通過設(shè)置不同值的fr來設(shè)置行于行之間（列與列值之間的比列寬度）
2、%：功能與fr類似，但無法自動去除行間距和列間距（容易撐破容器）
3、auto:自適應(yīng)寬度和高度；但不能同時和fr\%都相鄰
4、repeat(n,m)：重復設(shè)置指定的列寬或者行高,n重復的個數(shù)，m是設(shè)置的寬度或者高度，可以是多個值用空格區(qū)分開；
5、minmax(m,n):設(shè)置某行（某列）的最大最小值，處于兩指中間自適用大小
6、auto-fit和auto-fill：自動計算出軌道寬度（高度）填充容器空間

4、grid-area:常見值以及簡寫用法

1、四值：row-start/column-start/row-end/colunm/end;
2、雙值：設(shè)置起始行號和列號；起到定位單元格的作用
3、三值：與四值一致，知識省略了列的結(jié)束列號
4、單值：設(shè)置起始行號，其他全部默認值；auto,全部默認值
5、span混用：span n常用來代替結(jié)束行號和結(jié)束列號，跨n列（或者行）：

雙值：起始行號和列號，可以設(shè)置默認值；直接設(shè)置跨n列（行）即可；
單值：設(shè)置跨n行，列默認

5、grid常見值的使用

1、代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>grid布局</title>
        <style>
            *{
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
            :root{
                font-size: 10px;
            }
            .container{
                width: 60rem;
                height: 20rem;
                background-color: #D3D3D3;
                display: grid;
                grid-template-columns: repeat(3,10rem);
                grid-template-rows: repeat(3,4rem);
                /* 命名網(wǎng)格單元明稱 */
                grid-template-areas: 'one one three'
                                    'one one six';
                grid-gap: 0.5rem 1rem;
                /* 項目在網(wǎng)格單元格中的位置 start center end*/
                place-items: center center;
                /* 網(wǎng)格單元在容器中的分布 start center end*/
                place-content: center center;
                /* 設(shè)置網(wǎng)格單元在容器中的自動排列方向，默認為行優(yōu)先 */
                grid-auto-flow: row;
                /* 當容器中的項目數(shù)量超過，網(wǎng)格中生成單元個數(shù)量時，會生成隱式的單元格，
                如果自動排列方向為行時，可以設(shè)置隱式行高 ；如果自動排列方向位列時可以設(shè)置隱式列寬*/
                /* grid-auto-columns: 10rem; */
                grid-auto-rows: 3rem;
            }
            .container > .item{
                width: 8rem;
                height: 3rem;
                background-color: #20B2AA;
            }
            .container > .item:first-of-type{
                grid-area: span 2 / span 1;
                height: 6rem;
            }
            .container > .item:nth-of-type(4){
                grid-area:one;
            }
            .container >.item:nth-of-type(2){
                /* 設(shè)置某個項目在網(wǎng)格單元中的排列方式 */
                place-self: start end;
            }
            .container1{
                width: 60rem;
                height: 20rem;
                background-color: #66CDAA;
                display: grid;
                grid-template-columns: repeat(3,14rem);
                /* grid-template-columns: repeat(auto-fit,minmax(9rem,1fr)); */
                grid-template-rows: repeat(2,5rem);
                grid-gap:1rem;
                place-content: center;
            }
            .container1 > .item{
                /* width:9rem; */
                height: 4rem;
                background-color: #A71D5D;
            }
            .container1 > .item:first-child{
                grid-area: 1 / 2 / 3;
                grid-area: 2;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="item">7</div>
        </div>
        <div class="container1">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
        </div>
    </body>    
</html>