一个htnl搞定css的Grid布局零基础教程

最新推荐文章于 2024-04-26 22:14:41 发布
tiger_angel
最新推荐文章于 2024-04-26 22:14:41 发布
阅读量132
点赞数
文章标签： css 前端 css3
本文链接：https://blog.csdn.net/qq_38567039/article/details/133151705
版权
<!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>
        .item {
            border: 1px solid red;
            /* 设置边框宽度、样式和颜色 */
        }

        .box {
            /* 设置容器布局为grid布局 */
            display: grid;
            /* 指定每一行的宽,空格表示换行*/
            grid-template-rows: 100px 250px;
            /* 指定每一列的宽,空格表示换列*/
            grid-template-columns: 100px 200px 400px;
        }

        .box2 {
            width: 150px;
            height: 250px;
            ;
            /* 设置容器布局为grid布局 */
            display: grid;
            /* 指定每一行的宽高,空格表示换行*/
            grid-template-rows: 30% 30% 30%;
            /* 指定每一列的宽度,空格表示换列*/
            grid-template-columns: 30% 30% 30%;
        }

        .box3 {
            width: 150px;
            height: 250px;
            ;
            /* 设置容器布局为grid布局 */
            display: grid;
            /* 行宽.指定第一行200px,第二行占剩下的3分之1,第三行占剩下的3分之2*/
            grid-template-rows: 20px 1fr 2fr;
            /* 列宽.指定第一列50px,第二列占剩下的3分之1,第三列占剩下的3分之2*/
            grid-template-columns: 50px 1fr 2fr;
        }

        .box4 {
            width: 800px;
            height: 500px;
            border: 1px solid blue;

            display: grid;
            /* 行宽.分成三份,简写repeat(3, 33.33%) */
            grid-template-rows: repeat(3, 100px);
            /* 列宽. 行宽.分成四份,简写repeat(4, 33.33%) */
            grid-template-columns: repeat(4, 100px);
            /*justify-contentd的
            start 左对齐(默认),
            center:中对齐,
            end:右对齐方式
            space-around 环绕对齐,两边靠墙的间距小于每个中间距1倍
            space-between div内两端对齐,靠弄两边
            space-evenly 匀称对齐,每个间距一样
            */
            justify-content: space-evenly;
            /*
            上下方向的对齐 
            start 左对齐(默认),
            center:中对齐,
            end:右对齐方式
            space-around 环绕对齐,两边靠墙的间距小于每个中间距1倍
            space-between div内两端对齐,靠弄两边
            space-evenly 匀称对齐,每个间距一样 */
            align-content: space-evenly;
        }

        .box5 {
            width: 800px;
            height: 500px;
            border: 1px solid blue;
            display: grid;
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(4, 100px);
            justify-content: start;
            align-content: start;
            /* 行 列 间距 */
            gap: 20px 20px;
        }

        .box6 {
            height: 500px;
            border: 1px solid blue;
            display: grid;
            grid-template-rows: repeat(auto-fill, 100px);
            grid-template-columns: repeat(auto-fill, 100px);
            justify-content: start;
            align-content: start;
            /* 行 列 间距 */
            gap: 20px 20px;
        }

        /*
                        1_____2____3____4
         实现圣杯布局,   |     |头部|    |
                       2|_____|____|____|
                        |中左,|中间,|中右|
                       3|_____|____|____| 
                        |     |底部|    |
                       4|_____|____|____|
        */
        .box7 {
            width: 100%;
            height: 800px;
            border: 1px solid blue;
            display: grid;
            /* 设置三行,第一行200px 第二行自动占满(总高800,所以剩下600全占) 第三行200px */
            grid-template-rows: 200px auto 200px;
            /* 设置三列 第一列 20% 第二列自动 第三列20% */
            grid-template-columns: 200px auto 200px;
            /* gap: 10px 10px; */
        }

        /* 网格线属性是给子组件设置的,就是数从1开始数到几根线,就占到几根 */
        /* 设置头和底部都占4根线位置
            grid-column-start 行左边1开始
            grid-column-end 行右边1开始
            grid-row-start 列上边1开始
            grid-row-end 行下变1开始
        */
        .x,
        .t {
            /* grid-column-start: 1;
            grid-column-end: 4; */
            /* 简写 */
            grid-column: 1/4;
        }

        .box8 {
            width: 500px;
            /* width: 100%; */
            height: 800px;
            border: 1px solid blue;
            display: grid;
            /* 分成两行三列 */
            grid-template-columns: 200px repeat(2, auto);
            /* 分成两行三列 */
            grid-template-rows: repeat(2, auto);
            gap: 10px 10px;
        }

        .t8 {
            /* 列一共4根线,头占1开始3结束 */
            grid-column: 1/3;
        }

        .y8 {
            /* 右边从3开始4结束 */
            /* grid-column-start: 3;
            grid-column-end: 3; */
            grid-column: 3/4;
            /* 然后行从1开始3结束 */
            /* grid-row-start: 1;
            grid-row-end: 3; */
            grid-row: 1/3;
        }

        .box10 {
            width: 500px;
            height: 800px;
            border: 1px solid blue;
            display: grid;

            /* 分成两行三列 */
            grid-template-columns: repeat(3, auto);
            /* 分成两行三列 */
            grid-template-rows: repeat(3, auto);

            /* 定义每个各自的区域,通过定义名称来玩 */
            /* 可以写几个,就能占几个 */
            /* . 表示这个区域不属于任何单元格 */
            grid-template-areas: 'a a c'
                'd e f'
                '. h m';
            gap: 10px 10px;
        }

        .item101 {
            grid-area: a;
        }

        .item102 {
            grid-area: b;
        }

        .item103 {
            grid-area: c;
        }

        .item104 {
            grid-area: d;
        }

        .item105 {
            grid-area: e;
        }

        .item106 {
            grid-area: f;
        }

        .item107 {
            grid-area: g;
        }

        .item108 {
            grid-area: h;
        }

        .item109 {
            grid-area: m;
        }

        .box9 {
            width: 800px;
            height: 800px;
            border: 1px solid blue;
            display: grid;
            /* 分成两行三列 */
            grid-template-columns: 200px auto 200px;
            /* 分成两行三列 */
            grid-template-rows: 100px 400px 100px;
            /* gap: 10px 10px; */
            grid-template-areas: 'q q q'
                'z x y'
                'p1 p1 p1';
        }

        .t9 {
            grid-area: q;
        }

        .z9 {
            grid-area: z;
        }

        .x9 {
            grid-area: x;
        }

        .y9 {
            grid-area: y;
        }

        .o9 {
            grid-area: p1;
        }

        .box11 {
            width: 800px;
            height: 800px;
            border: 1px solid blue;
            display: grid;

            /* 分成8列 */
            grid-template-columns: repeat(8, 1fr);
            /* 分成3行 */
            grid-template-rows: repeat(3, auto);
            grid-template-areas: 'a11 a11 a11 a11 a11 a11 a11 a11'
                'b11 c11 c11 c11 c11 c11 d11 d11'
                'e11 e11 e11 e11 e11 e11 e11 e11';
            gap: 10px 10px;
        }

        .a11 {
            grid-area: a11;
        }

        .b11 {
            grid-area: b11;
        }

        .c11 {
            grid-area: c11;
        }

        .d11 {
            grid-area: d11;
        }

        .e11 {
            grid-area: e11;
        }

        /* 浏览器宽度小于600px,使用一下布局,自动切换响应式 */
        @media (max-width:600px) {
            .box11 {
                grid-template-areas: 'a11 a11 a11 a11 b11 b11 b11 b11'
                    'c11 c11 c11 c11 d11 d11 d11 d11'
                    'e11 e11 e11 e11 e11 e11 e11 e11';
                gap: 10px 10px;
            }
        }

        .box12 {
            /* 边距 */
            padding: 30px;
            margin: 0;
            /* 大小 */
            width: 800px;
            height: 800px;
            border: 1px solid blue;
            display: grid;
            /* 分成5列 */
            grid-template-columns: repeat(4, 1fr);
            /* 分成两行5行 */
            grid-template-rows: repeat(5, auto);
            /* 间距 */
            gap: 10px 10px;

        }

        .item12 {
            font-size: 40px;
            /* 圆角阴影效果 */
            border-radius: 6px;
            box-shadow: 3px 3px 9px #828282, -3px -3px 9px #fff;
        }

        /* 获取第几个子组件 */
        .box12 .item12:nth-child(8) {
            grid-row: 2/4;
            grid-column: 4/5;
        }

        .box12 .item12:nth-child(15) {
            grid-row: 4/6;
            grid-column: 4/5;
        }

        .box12 .item12:nth-child(16) {
            grid-row: 5/6;
            grid-column: 1/3;
        }

        .box13 {
            /* 边距 */
            /* 大小 */
            width: 800px;
            height: 800px;
            border: 1px solid blue;
        }

        /* 头部 */
        .box13 .tou13 {
            /* 边缘自动 */
            margin: auto;
            /* 整个头背景颜色 */
            background-color: #f7f7f7;
            /* 设置边框10px */
            padding: 10px;
        }

        .box13 .tou13 ul {
            /* 格子的背景颜色 */
            background-color: #fff;
            display: grid;
            /* 分成5列 */
            grid-template-columns: repeat(8, 1fr);
            /* 分成两行3行 */
            grid-template-rows: repeat(3, auto);
            /* 均匀浮动上下左右居中 */
            justify-content: space-evenly;
            align-content: space-evenly;
            /* 格子间距 */
            gap: 4px 10px;
        }

        /* 图片部分 */
        .box13 .zhong13 {
            /* 边缘自动 */
            margin: auto;
            /* 整个头背景颜色 */
            background-color: #f7f7f7;
            /* 设置边框10px */
            padding: 10px;
        }

        .box13 .zhong13 .ul13 {
            /* 格子的背景颜色 */
            background-color: #fff;
            display: grid;
            /* 分成6列 */
            grid-template-columns: repeat(6, auto);
            /* 分成两行2行 */
            grid-template-rows: repeat(2, auto);
        }

        .box13 .zhong13 .ul13 .img {
            display: grid;
            justify-content: center;
            align-items: center;

        }

        .box13 .zhong13 .ul13 .img img {
            width: 100%;
            height: 100%;
            /* 防止图片变形 */
            object-fit: cover;
            /* margin-left: -152px; */
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <hr />
    总宽150,高250
    /* 指定每一行的宽高,空格表示换行*/
    /* 指定每一列的宽度,空格表示换列*/

    <div class="box2">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">3</div>
        <div class="item">3</div>
        <div class="item">3</div>
        <div class="item">3</div>
    </div>
    <hr />
    /* 行宽.指定第一行200px,第二行占剩下的3分之1,第三行占剩下的3分之2*/
    /* 列宽.指定第一列50px,第二列占剩下的3分之1,第三列占剩下的3分之2*/
    <div class="box3">
        <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>
    <hr />
    /* 行宽.分成三份,简写repeat(3, 33.33%) */
    <br />
    /* 列宽. 行宽.分成四份,简写repeat(4, 33.33%) */
    <br />
    <div>
        <pre>
        /*justify-contentd的
        start 左对齐(默认),
        center:中对齐,
        end:右对齐方式
        space-around 环绕对齐,两边靠墙的间距小于每个中间距1倍
        space-between div内两端对齐,靠弄两边
        space-evenly 匀称对齐,每个间距一样
        */
        /* start 左对齐(默认),
        center:中对齐,
        end:右对齐方式
        space-around 环绕对齐,两边靠墙的间距小于每个中间距1倍
        space-between div内两端对齐,靠弄两边
        space-evenly 匀称对齐,每个间距一样 */ */
    </pre>
    </div>

    <div class="box4">
        <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>
    <br />

    /* 行 列 间距 */
    <div class="box5">
        <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>
    <br>
    自动填充,设置内部div的每个宽度自动填充,一行数量,auto-fill自动填充容纳更多的内部小div
    grid-template-columns: repeat(auto-fill, 100px);

    <div class="box6">
        <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">6</div>
        <div class="item">6</div>
        <div class="item">6</div>
        <div class="item">6</div>
        <div class="item">6</div>
        <div class="item">6</div>
        <div class="item">6</div>
        <div class="item">7</div>
    </div>
    <br>
    (重要:<span style="color:red"> 网格线来实现圣杯布局</span>)网格线属性是给子组件设置的
    <pre>
                      1_____2____3____4
        实现圣杯布局,   |     |头部|    |
                      2|_____|____|____|
                       |中左,|中间,|中右|
                      3|_____|____|____| 
                       |     |底部|    |
                      4|_____|____|____|

    设置如下图    .x,.t {
                        grid-column-start: 1;
                        grid-column-end: 4;
                    }
        /* 网格线属性是给子组件设置的,就是数从1开始数到几根线,就占到几根 */
        /* 设置头和底部都占4根线位置 如上图:所示的线如何来数嘛
            grid-column-start 行左边1开始
            grid-column-end 行右边1开始
            grid-row-start 列上边1开始
            grid-row-end 行下变1开始
        */
    </pre>
    <div class="box7">
        <div class="item t">头部</div>
        <div class="item z">中间左</div>
        <div class="item z">中间中</div>
        <div class="item z">中间右</div>
        <div class="item x">底部</div>
    </div>
    <br>
    <span style="color: blue;">网格线-列子:</span>
    <pre>
        列一共4根线,行一共3根线
        /* 列-头部占1开始3结束 */
        /* 列-右边-从3开始4结束 */
        /* 行-右边-从1开始3结束 */

    </pre>
    <div class="box8">
        <div class="item t8">头部</div>
        <div class="item y8">右边</div>
        <div class="item z8">中间上</div>
        <div class="item z8">中间下</div>
    </div>
    <br>
    对每个子组件的各自设置名称,以此来占用,多余的会挤到末尾
    <pre>
        /* 定义每个各自的区域,通过定义名称来玩 */
        /* 可以写几个,就能占几个 */
        /* . 表示这个区域不属于任何单元格 */
        grid-template-areas: 'a a c'
                             'd e f'
                             '. h m';
        
        在子组件上写:{
            grid-area: a;
        }

    <div class="box10">
        <div class="item item101">1</div>
        <div class="item item102">2</div>
        <div class="item item104">4</div>
        <div class="item item103">3</div>
        <div class="item item105">5</div>
        <div class="item item106">6</div>
        <div class="item item107">7</div>
        <div class="item item108">8</div>
        <div class="item item109">9</div>
    </div>

    <br>
    <span style="color: blue;">grid-template-areas-列子:</span>
    <pre>
     
    </pre>
    <div class="box9">
        <div class="item t9">头部</div>
        <div class="item z9">中间左</div>
        <div class="item x9">中间中</div>
        <div class="item y9">中间右</div>
        <div class="item o9">底部</div>
    </div>

    <br>
    <span style="color: blue;">利用grid-template-areas
        实现响应式布局,在浏览器宽度小于600px的时候展示另一种风格:</span>
    <pre>
        这是默认的展示: 1_____2____3____4
                       |     头部      |
                      2|_______________|
                       |中左1|中间5|中右2|
                      3|____|_____|____| 
                       |     底部      |
                      4|_______________|
   
浏览器宽度小于600px
的时候展示另一种风格:  1_____2____3____4
                       | 头部 |  中左 |
                      2|______|_______|
                       | 中间 |中右   |
                      3|____ _|________| 
                       |     底部    |
                      4|_____________|
   
                    </pre>
    <div class="box11">
        <div class="item a11">头部</div>
        <div class="item b11">中间左</div>
        <div class="item c11">中间中</div>
        <div class="item d11">中间右</div>
        <div class="item e11">底部</div>
    </div>

    <br>
    <span style="color: blue;">实现计算器布局:</span>
    <pre>
   实现计算器布局
                    </pre>

    <div class="box12">
        <div class="item12">Num lock</div>
        <div class="item12">/</div>
        <div class="item12">*</div>
        <div class="item12">-</div>
        <div class="item12">7</div>
        <div class="item12">8</div>
        <div class="item12">9</div>
        <div class="item12">+</div>
        <div class="item12">4</div>
        <div class="item12">5</div>
        <div class="item12">6</div>
        <div class="item12">1</div>
        <div class="item12">2</div>
        <div class="item12">3</div>
        <div class="item12">Enter</div>
        <div class="item12">0</div>
        <div class="item12">.</div>
    </div>

    <br>
    <span style="color: blue;">实现列子二:</span>
    <pre>
        实现列子二
                    </pre>

    <div class="box13">
        <!-- 头部 -->
        <div class="tou13">
            <ul>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
                <span>首页</span>
            </ul>
        </div>
        <!-- 图片部分 -->
        <div class="zhong13">
            <ul class="ul13">
                <div class="img">
                    <img
                        src="https://img2.baidu.com/it/u=2941359769,503584803&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=50" />
                </div>
                <div class="img">
                    <img
                        src="https://img2.baidu.com/it/u=1762205629,145693024&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750" />
                </div>
                <div class="img">
                    <img
                        src="https://img2.baidu.com/it/u=528833255,3463981408&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=80" />
                </div>
                <div class="img">
                    <img
                        src="https://img0.baidu.com/it/u=3326862823,3285905921&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800" />
                </div>
                <div class="img">
                    <img
                        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F15%2F20200615084358_ueydn.jpg&refer=http%3A%2F%2Fc-" />
                </div>
                <div class="img">
                    <img src="https://up.enterdesk.com/edpic_source/52/3c/29/523c29856f713017d58de09bbf0484b5.jpg" />
                </div>
                <div class="img">
                    <img
                        src="https://img2.baidu.com/it/u=137693477,1335447223&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" />
                </div>
                <div class="img">
                    <img src="http://pic1.win4000.com/wallpaper/0/593e50a79a928.jpg" />
                </div>
                <div class="img">
                    <img
                        src="https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1503/29/c5/4572580_1427572893073_mthumb.jpg" />
                </div>
                <div class="img">
                    <img src="http://pic1.win4000.com/mobile/2020-07-10/5f081765b3c10.jpg" />
                </div>
                <div class="img">
                    <img src="http://pic1.win4000.com/wallpaper/b/571f216dde81f.jpg" />
                </div>
                <div class="img">
                    <img src="https://up.enterdesk.com/edpic_source/0c/4a/0f/0c4a0fa2b1ad5f62a8c8bcdc3a790198.jpg" />
                </div>
            </ul>
        </div>
    </div>
</body>

</html>