CSS3----grid布局实例

最新推荐文章于 2025-06-30 16:28:30 发布
最新推荐文章于 2025-06-30 16:28:30 发布
阅读量223 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/SunlikeLWL/p/8952804.html
本文详细介绍了CSS3 Grid布局的基础用法及高级特性，包括如何定义网格列和行的大小、网格区域、网格间隙等内容，并提供了丰富的示例帮助理解。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<html>

<head>
    <meta charset="utf-8">
    <title>CSS3----grid布局实例</title>
    <meta name="keyword" content="CSS3----grid布局实例">
    <meta name="discription" content="CSS3----grid布局实例">
</head>

<body>

    <style>

    body {
        width: 100%;
        height: 50%;
    }
    .container1 {
        width: 50%;
        height: 50%;
        display: inline-grid;
        grid-template-columns: 30% 40% 10%;
        grid-template-rows: 20% 40%;
        background-color: #F2F2F2;
    }

    .container1 .item {
        border: 1px solid red;
    }
    </style>
    <h2>1.grid-template-columns/grid-template-rows</h2>
    <p>
        使用空格分割多个值来定义网格的列和行的大小.这些值表示轨道的大小
    </p>
    <div class="container1">
        <div class="item item-1">111</div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-1">111</div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
    </div>






 

    <style>
    .container2 {
        width: 50%;
        height: 50%;
        display: inline-grid;
        grid-template-columns: 200px 1fr 1fr;
        grid-template-rows: 20% 40%;
        background-color: #F2F2F2;
    }

    .container2 .item {
        border: 1px solid red;
    }
    </style>
    <h2>2.grid-auto-columns/grid-auto-rows</h2>
    <p></p>
    <div class="container2">
        <div class="item item-1">111</div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-1">111</div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
    </div>







 

    <style>
    .container3 {
        width: 50%;
        height: 50%;
        display: inline-grid;
        grid-template-columns: 50px 50px 50px 50px;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"
    }

    .container3 .item {
        border: 1px solid red;
    }

    .container3 .item-1 {
        grid-area: header;
    }

    .container3 .item-2 {
        grid-area: main;
    }

    .container3 .item-3 {
        grid-area: sidebar;
    }

    .container3 .item-4 {
        grid-area: footer;
    }
    </style>
    <h2>3.grid-area</h2>
    <p>指定网格区域的名称来定义网格模板(属性:grid-template-areas;区域名:grid-areas)</p>
    <div class="container3">
        <div class="item item-1">header</div>
        <div class="item item-2">main</div>
        <div class="item item-3">sidebar</div>
        <div class="item item-4">footer</div>
    </div>







 

    <style>
    .container4 {
        width: 50%;
        height: 50%;
        display: inline-grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        background-color: #F2F2F2;
        grid-column-gap: 5px;
        grid-row-gap: 5px;
    }

    .container4 .item {
        border: 1px solid red;
    }
    </style>
    <h2>4.grid-column-gap/grid-row-gap</h2>
    <div class="container4">
        <div class="item item-1">111</div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-1">111</div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
    </div>







 

    <style>
    .container5 {
        width: 50%;
        height: 50%;
        display: inline-grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        background-color: #F2F2F2;
        grid-gap: 10px;
    }

    .container5 .item {
        border: 1px solid red;
    }
    </style>
    <h2>5.grid-gap: 10px</h2>
    <h3>1fr:(百分比)</h3>
    <div class="container5">
        <div class="item item-1">111</div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-1">111</div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
    </div>







 

 

 

    <style>
    .container6 {
        width: 50%;
        height: 50%;
        display: inline-grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        background-color: #F2F2F2;
        grid-gap: 10px;
    }

    .container6-1 {
        justify-items: left;
    }

    .container6-2 {
        justify-items: right;
    }

    .container6-3 {
        justify-items: center;
    }

    .container6-4 {
        justify-items: stretch;
    }

    .container6-1 .item,
    .container6-2 .item,
    .container6-3 .item,
    .container6-4 .item {
        border: 1px solid red;
    }
    </style>
    <h2>6.justify-items</h2>
    <p>网格内容水平轴对齐方式:</p>
    <p>start:左端对齐</p>
    <div class="container6 container6-1">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
    </div>
    <p>end:右端对齐</p>
    <div class="container6 container6-2">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
    </div>
    <p>center: 居中对齐</p>
    <div class="container6 container6-3">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
    </div>
    <p>stretch: 伸展对齐</p>
    <div class="container6 container6-4">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
    </div>






 



    <style>
    .container7 {
        width: 50%;
        height: 50%;
        display: inline-grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        background-color: #F2F2F2;
        grid-gap: 10px;
    }

    .container7-1 {
        align-items: start;
    }

    .container7-2 {
        align-items: end;
    }

    .container7-3 {
        align-items: center;
    }

    .container7-4 {
        align-items: stretch;
    }

    .container7 .item {
        border: 1px solid red;
    }
    </style>
    <h2>7.align-items</h2>
    <p>网格内容垂直轴对齐方式:</p>
    <p>start:上端对齐</p>
    <div class="container7 container7-1">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
    </div>
    <p>end:下端对齐</p>
    <div class="container7 container7-2">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
    </div>
    <p>center: 居中对齐</p>
    <div class="container7 container7-3">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
    </div>
    <p>stretch: 伸展对齐</p>
    <div class="container7 container7-4">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
    </div>






<style>
    .container8 {
        width: 50%;
        height: 50%;
        display: inline-grid;
        grid-template-columns: 200px 200px 200px;
        grid-template-rows: 1fr 1fr;
        background-color: #F2F2F2;
        grid-gap: 10px;
    }

    .container8-1 {
        justify-content: start;
    }

    .container8-2 {
        justify-content: end;
    }

    .container8-3 {
        justify-content: center;
    }

    .container8-4 {
        justify-content: stretch;
    }

    .container8-5 {
        justify-content: space-around;
    }

    .container8-6 {
        justify-content: space-between;
    }

    .container8-7 {
        justify-content: space-evenly;
    }


    .container8 .item {
        border: 1px solid red;
    }
    </style>
    <h2>8.justify-content</h2>
    <p>网格水平轴对齐方式(网格总大小可能小于父容器的大小):</p>
    <p>start:左端对齐</p>
    <div class="container8 container8-1">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
    </div>
    <p>end:右端对齐</p>
    <div class="container8 container8-2">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
    </div>
    <p>center: 居中对齐</p>
    <div class="container8 container8-3">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
    </div>
    <p>stretch: 伸展对齐</p>
    <div class="container8 container8-4">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
    </div>
    <p>space-around: 网格之间均等间隙,两端间隙减半</p>
    <div class="container8 container8-5">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
    </div>
    <p>space-between: 网格之间相等间隙,两端无间隙</p>
    <div class="container8 container8-6">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
    </div>
    <p>space-evenly: 网格之间间隙想的,包括两端</p>
    <div class="container8 container8-7">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
    </div>









 


    <style>
    .container9 {
        width: 50%;
        height: 50%;
        display: inline-grid;
        grid-template-columns: 200px 200px 200px;
        grid-template-rows: 20px 20px;
        background-color: #F2F2F2;
        grid-gap: 10px;
    }

    .container9-1 {
        align-content: start;
    }

    .container9-2 {
        align-content: end;
    }

    .container9-3 {
        align-content: center;
    }

    .container9-4 {
        align-content: stretch;
    }

    .container9-5 {
        align-content: space-around;
    }

    .container9-6 {
        align-content: space-between;
    }

    .container9-7 {
        align-content: space-evenly;
    }


    .container9 .item {
        border: 1px solid red;
    }
    </style>
    <h2>9.align-content</h2>
    <p>网格垂直轴对齐方式(网格总大小可能小于父容器的大小):</p>
    <p>start:上端对齐</p>
    <div class="container9 container9-1">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
        <div class="item item-4">111</div>
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
        <div class="item item-4">111</div>
    </div>
    <p>end:下端对齐</p>
    <div class="container9 container9-2">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
        <div class="item item-4">111</div>
    </div>
    <p>center: 居中对齐</p>
    <div class="container9 container9-3">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
        <div class="item item-4">111</div>
    </div>
    <p>stretch: 伸展对齐</p>
    <div class="container9 container9-4">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
        <div class="item item-4">111</div>
    </div>
    <p>space-around: 网格之间均等间隙,两端间隙减半</p>
    <div class="container9 container9-5">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
        <div class="item item-4">111</div>
    </div>
    <p>space-between: 网格之间相等间隙,两端无间隙</p>
    <div class="container9 container9-6">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
        <div class="item item-4">111</div>
    </div>
    <p>space-evenly: 网格之间间隙想的,包括两端</p>
    <div class="container9 container9-7">
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
        <div class="item item-1">
            <div>222</div>
        </div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">111</div>
        <div class="item item-4">111</div>
    </div>







 




    <style>
    .container10 {
        width: 50%;
        height: 50%;
        display: grid;
        background-color: #F2F2F2;
        grid-template-columns: 60px 90px;
        /* 定义行单位的宽度  */
        grid-template-rows: 60px 90px;
        /* 定义高单位的宽度   */
        grid-gap: 5px;
    }

    .container10 .item {
        border: 1px solid red;
    }

    .container10 .item-1 {
        grid-column: 1/2;
        grid-row: 2/3;
    }

    .container10 .item-2 {
        grid-column: 5/6;
        grid-row: 2/3;
    }
    </style>
    <h2>10.grid-auto-columns/grid-auto-rows</h2>
    <p>
        指定自动生成的网格轨道的大小
    </p>
    <div class="container10">
        <div class="item item-1">111</div>
        <div class="item item-2">222</div>
    </div>






 

    <style>
    .container11 {
        width: 400px;
        height: 200px;
        display: grid;
        background-color: #F2F2F2;
        grid-auto-columns: 60px 60px 60px 60px 60px;
        /* 定义行单位的宽度  */
        grid-template-rows: 60px 60px;
        /* 定义高单位的宽度   */
    }

    .container11-1 {
        grid-auto-flow: column;
    }

    .container11-2 {
        grid-auto-flow: row;
    }

    .container11-3 {
        grid-auto-flow: dense;
    }

    .container11 .item {
        border: 1px solid red;
        box-sizing: border-box;
    }

    .container11 .item-1 {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .container11 .item-5 {
        grid-column: 5;
        grid-row: 1 / 3;
    }
    </style>
    <h2>11.grid-auto-flow</h2>
    <p>
        如果没有指定放置位置,放置算法会自动放置这些项目
    </p>
    <p>
        row: 一次填充每行,根据需要添加新行
    </p>
    <div class="container11 container11-1">
        <div class="item item-1">111</div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">444</div>
        <div class="item item-5">555</div>
    </div>
    <p>
        column: 一次填充每列,根据粗腰添加新列
    </p>
    <div class="container11 container11-2">
        <div class="item item-1">111</div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">444</div>
        <div class="item item-5">555</div>
    </div>
    <p>
        dense: 后面出现比较小的item,则尝试在网格中填充
    </p>
    <div class="container11 container11-3">
        <div class="item item-1">111</div>
        <div class="item item-2">222</div>
        <div class="item item-3">333</div>
        <div class="item item-4">444</div>
        <div class="item item-5">555</div>
    </div>







 

    <style>
    .container12 {
        width: 240px;
        height: 240px;
        display: grid;
        background-color: #F2F2F2;
        grid-template-columns: 60px 60px 60px 60px;
        grid-template-rows: 60px 60px 60px 60px;
    }

    .container12 .item {
        border: 1px solid red;
        box-sizing: border-box;
    }

    .container12 .item-1 {
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 2;
        grid-row-end: 4;
    }
    </style>
    <h2>12.grid-column-start/grid-column-end/grid-row-start/grid-row-end</h2>
    <p>
        定义item的具体位置(水平开始/水平结束/垂直开始/垂直结束)
    </p>
    <div class="container12">
        <div class="item item-1">111</div>
    </div>








 

    <style>
    .container13 {
        width: 240px;
        height: 240px;
        display: grid;
        background-color: #F2F2F2;
        grid-template-columns: 60px 60px 60px 60px;
        grid-template-rows: 60px 60px 60px 60px;
    }

    .container13 .item {
        border: 1px solid red;
        box-sizing: border-box;
    }

    .container13 .item-1 {
        grid-column: 2;
        grid-row: 2;
    }
    </style>
    <h2>13.grid-column/grid-row: grid-column-start/grid-column-end/grid-row-start/grid-row-end简写</h2>
    <p>
        定义item的具体位置(水平开始/水平结束/垂直开始/垂直结束)
    </p>
    <div class="container13">
        <div class="item item-1">111</div>
    </div>







 

    <style>
    .container14 {
        width: 240px;
        height: 240px;
        display: grid;
        background-color: #F2F2F2;
        grid-template-columns: 60px 60px 60px 60px;
        grid-template-rows: 60px 60px 60px 60px;
    }

    .container14 .item {
        border: 1px solid red;
        box-sizing: border-box;
    }

    .container14 .item-1 {
        grid-area: 2;
    }
    </style>
    <h2>14.grid-area: grid-column/grid-row简写</h2>
    <p>
        定义item的具体位置(水平开始/水平结束/垂直开始/垂直结束)
    </p>
    <div class="container14">
        <div class="item item-1">111</div>
    </div>








 

    <style>
.container15 {
        width: 240px;
        height: 240px;
        display: grid;
        background-color: #F2F2F2;
        grid-template-columns: 60px 60px 60px 60px;
        grid-template-rows: 60px 60px 60px 60px;
    }

    .container15 .item {
        border: 1px solid red;
        box-sizing: border-box;
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 2;
        grid-row-end: 4;
    }

    .container15-1 .item-1 {
        justify-self: start;
    }

    .container15-2 .item-1 {
        justify-self: end;
    }
}
.container15-3 .item-1 {
    justify-self: center;
}
.container15-4 .item-1 {
    justify-self: stretch;
}
    </style>
    <h2>15.justify-self</h2>
    <p>
        item内容水平对齐方式
    </p>
    <p>start: item内容水平右对齐</p>
    <div class="container15 container15-1">
        <div class="item item-1">111</div>
    </div>
    <p>end: item内容水平右对齐</p>
    <div class="container15 container15-2">
        <div class="item item-1">111</div>
    </div>
    <p>center: item内容水平左对齐</p>
    <div class="container15 container15-3">
        <div class="item item-1">111</div>
    </div>
    <p>stretch: item内容水平居中对齐</p>
    <div class="container15 container15-4">
        <div class="item item-1">111</div>
    </div>









 

    <style>
.container16 {
        width: 240px;
        height: 240px;
        display: grid;
        background-color: #F2F2F2;
        grid-template-columns: 60px 60px 60px 60px;
        grid-template-rows: 60px 60px 60px 60px;
    }

    .container16 .item {
        border: 1px solid red;
        box-sizing: border-box;
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 2;
        grid-row-end: 4;
    }

    .container16-1 .item-1 {
        align-self: start;
    }

    .container16-2 .item-1 {
        align-self: end;
    }
}
.container16-3 .item-1 {
    align-self: center;
}
.container16-4 .item-1 {
    align-self: stretch;
}
    </style>
    <h2>16.align-self</h2>
    <p>
        item内容垂直对齐方式
    </p>
    <p>start: item内容垂直右对齐</p>
    <div class="container16 container16-1">
        <div class="item item-1">111</div>
    </div>
    <p>end: item内容垂直右对齐</p>
    <div class="container16 container16-2">
        <div class="item item-1">111</div>
    </div>
    <p>center: item内容垂直左对齐</p>
    <div class="container16 container16-3">
        <div class="item item-1">111</div>
    </div>
    <p>stretch: item内容垂直居中对齐</p>
    <div class="container16 container16-4">
        <div class="item item-1">111</div>
    </div>
</body>

</html>

　　

转载于:https://www.cnblogs.com/SunlikeLWL/p/8952804.html

Grid网格布局+案例
GLINLIND的博客
02-29 1233
Grid网格布局 Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。 作用在容器上的： display : grid grid-template-columns : 设置列数 grid-template-rows : 设置行数 fr单位 repeat()方法 注：网格中提供了一个新的单位：fr ( 比例单位 ) ...
Grid布局方法案例
m0_74118186的博客
04-16 549
Grid 布局方法
【CSS】Grid 布局基础知识及实例展示
最新发布
waterlin2011的博客
06-30 603
CSS Grid 布局是一种二维网格布局系统，与 Flexbox（一维布局模型）不同，Grid 能够同时处理行和列，使你可以更高效地设计复杂的网页布局。
CSS之Grid网格布局
swimming_in_IT_的博客
05-31 1754
一：概述 网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针...
Grid布局综合案例
加强前端基础
05-27 454
CSS3 Grid布局综合案例 - 使用vue布局键盘案例
Grid网格布局实例
油墨香^-^的博客
07-12 1694
Grid 布局将容器划分成"行"和"列"，产生单元格也就是项目所在。容器就是设置了 或者 的元素。项目就是容器的顶层子元素。网格线就是项目边缘的线。容器属性必须设置在容器上。设置容器为行性质或内联性质的网格布局： 设置项目之间的间隔 整个内容区域在容器里面的水平/垂直位置 项目内容在单元格中的水平/垂直位置 repeat()/minmax()函数 和 auto-fill/auto/fr关键字 有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个
CSS-css3-grid-and-flexbox-projects:详细介绍了使用CSS Grid和CSS Flex-box覆盖CSS3的＃building-blocks
03-30
随着技术的发展，CSS3引入了许多新特性，其中CSS Grid和Flexbox是两个非常重要的布局系统，它们极大地增强了开发者设计复杂网页布局的能力。本项目“CSS-css3-grid-and-flexbox-projects”深入探讨了如何利用这两个...
html5+css3-css切换图片实例
11-06
CSS3是层叠样式表（Cascading Style Sheets）的最新版本，它扩展了CSS2.1的功能，添加了许多新的选择器、布局模式和动画效果。在图片切换实例中，CSS3的`transition`和`animation`属性尤其关键。`transition`可以让...
css3-ul-ol列表
11-20
更进一步，我们还可以利用CSS3的`flexbox`或`grid`布局来控制列表项的排列方式。`display: flex`可以让列表项在一行内灵活分布，而`display: grid`则可以创建二维网格布局，使得列表更加规整和多变。 动画效果也是...
CSS Grid 网格布局 - auto-fit 关键字 和 auto-fill 关键字的区别
nagenage123的博客
06-25 1307
CSS Grid 网格布局 - auto-fit 关键字 和 auto-fill 关键字 的区别 auto-fit 和 auto-fill 都是模式填充，在网格容器宽度大于网格项的最小宽度总和时就会有区别。 实例解析： css.css : .wrap{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-rows: 60px; grid-auto-rows: 60px;
CSS3-CLOCK:CSS3时钟
06-11
而Flexbox或Grid布局可以帮助更好地组织和对齐时钟的各个部分。 8. **响应式设计**：CSS3的媒体查询(`@media`)可以让时钟根据屏幕大小自动调整布局，确保在不同设备上都能正常显示。 9. **颜色和背景**：CSS3提供...
Grid布局综合Demo案例
05-27
Grid布局综合使用
Grid布局练习案例
weixin_43311355的博客
03-07 698
简单用grid布局练手
grid布局学习案例
yiyueqinghui的博客
07-14 547
参考链接 http://www.voidcn.com/article/p-yemyzqru-byz.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .wrapper { width:100%; background: #f3f3f3; text-align: c.
CSS的Grid布局详解（ 示例代码 ）
大剑师兰特的GIS世界
04-17 1454
CSS Grid布局是一种二维布局系统，它允许开发者在网页中创建具有复杂网格结构的布局，可以精确控制每一行和每一列的大小、对齐以及项目的放置位置。Grid布局提供了极其灵活的方式来设计和调整布局，特别适合于网页设计中需要精细划分区块和复杂交互布局的需求。
5分钟掌握Grid布局【多图示例】
weixin_34187862的博客
04-20 1565
Grid布局一览 网格系统 生成网格系统：display:gird "画"一个网格出来： grid-template-columns/rows 圈地为王（"画"一个元素）：grid-column/row 可视化布局：grid-template-areas 给网格设置gap 富余空间管理 越界处理与grid-auto-columns 自动放置与grid-auto-flow 其它现象 ...
Grid布局练习案例一
weixin_43311355的博客
03-03 517
Grid布局练习
grid简单布局案例
TianZhengg的博客
04-10 733
代码的实现
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值