grid 网格布局

作者: Lee_Han_ | 来源:发表于2020-12-18 20:04 被阅读0次

Grid网格布局

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。

作用在grid容器上	作用在grid子项上
grid-template-columns	grid-column-start
grid-template-rows	grid-column-end
grid-template-areas	grid-row-start
grid-template	grid-row-end
grid-column-gap	grid-column
grid-row-gap	grid-row
grid-gap	grid-area
justify-items	justify-self
align-items	align-self
place-items	place-self
justify-content
align-content
palce-content

grid-template-columns 和 grid-template-rows

对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）

有时候，我们网络的划分是很有规律的，如果需要添加多个纵横网络时，就可以利用repeat()语法进行简化操作。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box{
                width: 500px;
                height: 500px;
                border: 1px dotted gray;
                display: grid;
                /* grid-template-rows:第一行 第二行 第三行 ... */
                grid-template-rows: 100px auto 25%;
                /* grid-template-rows:第一列 第二列 第三列 ... */
                grid-template-columns: 100px 100px 200px 100px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
        </div>
    </body>
    </html>

单位 fr

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px dotted gray;
            display: grid;
            /* fr 该行占总宽度的比例 当数值综合大于等于1的时候 才会将盒子沾满*/
            /* grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr; */
            /* repeat */
            grid-template-rows: repeat(3,1fr);
            grid-template-columns: 1fr 1fr 1fr;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>

grid-template-area 和 grid-template

area是区域的意思 grid-template-area就是给我们的网格划分区域的。此时grid子项只要使用grad-area属性指定其隶属于哪个区

grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px dotted gray;
            display: grid;
            /* fr 该行占总宽度的比例 当数值综合大于等于1的时候 才会将盒子沾满*/
            /* grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr; */
            /* repeat */
            grid-template-rows: repeat(3,1fr);
            grid-template-columns: 1fr 1fr 1fr;
            /* 只可以形成矩形  不能形成其他图形 */
            grid-template-areas: 
            "a1 a1 a1"
            "a2 a2 a3"
            "a2 a2 a3"
            ;
        }
        .box div{
            border: 1px solid #666;
        }
        .box div:nth-of-type(1){
            grid-area: a1;
        }
        .box div:nth-of-type(2){
            grid-area: a2;
        }
        .box div:nth-of-type(3){
            grid-area: a3;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

复合写法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box{
                width: 300px;
                height: 300px;
                border: 1px dotted gray;
                display: grid;
                grid-template: 
                "a1 a1 a1" 1fr
                "a2 a2 a3" 1fr
                "a2 a2 a3" 1fr
                /1fr 1fr 1fr;
            }
            .box div{
                border: 1px solid #666;
            }
            .box div:nth-of-type(1){
                grid-area: a1;
            }
            .box div:nth-of-type(2){
                grid-area: a2;
            }
            .box div:nth-of-type(3){
                grid-area: a3;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </body>
    </html>

grid-column-gap和grid-row-gap

grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸

CSS grid-gap属性是grid-column-gap和grid-row-gap的复合写法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box{
                width: 300px;
                height: 300px;
                /* border: 1px dotted gray; */
                display: grid;
                grid-template: 
                "a1 a1 a1" 1fr
                "a2 a2 a3" 1fr
                "a2 a2 a3" 1fr
                /1fr 1fr 1fr;
    
                grid-column-gap: 10px;
                grid-row-gap: 10px;
                /*复合写法*/
                /* grid-gap: 横向 纵向; */
                /* grid-gap: 10px 20px; */
            }
            .box div{
                border: 1px solid #666;
            }
            .box div:nth-of-type(1){
                grid-area: a1;
            }
            .box div:nth-of-type(2){
                grid-area: a2;
            }
            .box div:nth-of-type(3){
                grid-area: a3;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </body>
    </html>

justify-items 和 align-items

justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。

align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。

place-items可以让align-items和justify-items属性写在单个声明中。

注：
    使用这两个属性之后，网格不在撑开 而是用内容去撑开。

取值	含义
stretch	默认值，拉伸。表现为水平或者垂直填充
start	表现为容器左侧或者顶部对齐
end	表现为容器右侧或者底部对齐
center	表现为水平或垂直居中对齐

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box{
                width: 300px;
                height: 300px;
                border: 1px dotted gray;
                display: grid;
                grid-template-rows: repeat(3,1fr);
                grid-template-columns: 1fr 1fr 1fr;
                /* justify-items: end;
                align-items: end; */
                /* place-items:纵向 横向 */
                place-items:start end;
            }
            .box div{
                border:1px dotted gray;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </body>
    </html>

justify-content 和 align-content

justify-content指定了网格元素的水平分布方式。

align-content指定了网格元素垂直分布方式。

place-content可以让justify-content和align-content属性写在一个CSS声明中。

取值	含义
stretch	默认值，拉伸。表现为水平或者垂直填充。
start	表现为容器左侧对齐或者顶部对齐
end	表现为容器右侧或者底部对齐
center	表现为水平或者垂直居中
space-between	表现为两端对齐
space-around	享有独立不重叠的空白空间
sapce-evenly	平均分配空白空间

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box{
                width: 300px;
                height: 300px;
                border: 1px dotted gray;
                display: grid;
                grid-template-rows: repeat(3,auto);
                grid-template-columns: repeat(3,auto);
                /* justify-content: space-between;
                align-content: space-between; */
                /* place-content:纵 横 */
                place-content: space-around space-between;
            }
            .box div{
                border:1px dotted gray;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </body>
    </html>

作用在grid子项上的css属性

取值	含义
grid-column-start	水平方向上占据的起始位置。
grid-column-end	水平方向上占据的结束位置。（span属性）
grid-row-start	垂直方向上占据的起始位置。
grid-row-end	垂直方向上占据的结束位置。（sapn属性）
grid-column	grid-column-start + grid-column-end的缩写。
grid-row	grid-row-start + grid-row-end 的缩写。
grid-area	表示当前网格所占用的区域，名字和位置两种表示方法。
justifty-self	单个网格元素的水平对齐方式。
align-self	单个网格元素的垂直对齐方式。
place-self	align-self 和 justify-self的缩写。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box{
                width: 300px;
                height: 300px;
                border: 1px dotted gray;
                display: grid;
                grid-template-rows: repeat(3,1fr);
                grid-template-columns: repeat(3,1fr);
            }
            .box div{
                border:1px dotted gray;
                /* grid-column-start: 2;
                grid-column-end: 3;
                grid-row-start: 2;
                grid-row-end: 4; */
                /* span 表示占据的个数  超出盒子无效*/
                /* grid-column-start: 2;
                grid-column-end: 3;
                grid-row-start: 2;
                grid-row-end: span 2; */
                /* 起始 / 结束 */
                grid-column: 2 / 3;
                grid-row: 2 / span 2;
                /* 水平起始 / 垂直起始 / 水平结束 / 垂直结束 */
                /*grid-area: 1 / 2 / 3 / 4 ;*/
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>1</div>
        </div>
    </body>
    </html>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box{
                width: 300px;
                height: 300px;
                border: 1px dotted gray;
                display: grid;
                grid-template-rows: repeat(3,1fr);
                grid-template-columns: repeat(3,1fr);
            }
            .box div{
                border:1px dotted gray;
            }
            .box div:nth-last-child(5){
                /* justify-self: start;
                align-self: end; */
                /* 纵 横 */
                place-self: end start;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </body>
    </html>

grid 网格布局

Grid网格布局

grid-template-columns 和 grid-template-rows

单位 fr

grid-template-area 和 grid-template

复合写法

grid-column-gap和grid-row-gap

justify-items 和 align-items

justify-content 和 align-content

作用在grid子项上的css属性

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读