前端页面之网格_前端展示方格列表

作者：从前慢现在也慢 | 2024-03-23 13:37:46

踩

前端展示方格列表

属性及属性值
1. display:grid


<style>
        .box{
            width: 400px;
            height: 400px;
            background-color: skyblue;
            display: grid;
            grid-template-columns: repeat(3,100px);
            grid-template-rows: repeat(3,100px);
        }
        .div4{
            grid-row: 2/4;
            grid-column: 1/3;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
            <img src="./images/15_03.jpg" alt="">
        </div>
        <div>
            <img src="./images/15_04.jpg" alt="">
        </div>
        <div>
            <img src="./images/15_05.jpg" alt="">
        </div>
        <div class="div4">
            <img src="./images/15_08.jpg" alt="">
        </div>
        <div>
            <img src="./images/15_09.jpg" alt="">
        </div>
        <div>
            <img src="./images/15_10.jpg" alt="">
        </div>
    </div>

grid-template-columns: repeat(3,100px);三列，每列宽100px;
1. grid-template-columns:100px 1fr 150px;1fr=大盒子-固定值
grid-template-rows: repeat(3,100px);三行，每行高100px
1. grid-template-rows: 1fr 1fr 1fr; 平分大盒子
2. grid-template-rows: 1fr 3fr 2fr;每行所占份数
grid-row: 2/4;网格行的起始终止线；
grid-column: 1/3;网格列的起始终止线；
grid-gap:10px 10px;第一个值是行间距第二个值是列间距

效果图

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/295508

前端页面之网格_前端展示 方格列表

前端页面之网格_前端展示方格列表