宫格布局的简单使用

宫格布局的简单使用

需要设置display

/*css部分*/
.grid {
            display: grid;
            width: 80%;
            margin: 0 auto;
            height: 300px;
            /* 设置每个元素的宽度 rem px % rf */
            /* 设置几个一行为几个 */
            grid-template-columns: calc(20% - 50px) calc(20% - 50px) calc(20% - 50px) calc(20% - 50px) calc(20% - 50px);
            /* 设置每个元素的高度 */
            grid-template-rows: 20%;
            /* 行间距 */
            grid-row-gap: 10px;
            /* 列间距 */
            grid-column-gap: 50px;
        }

        .g {
            min-width: 150px;
            width: 100%;
            background-color: aquamarine;
        }
/*
	可以在.g中写入最小高度更最小宽度一致写法即可
*/

/*html部分 */
<div>
        <h2>网格布局</h2>
        <div class="grid">
            <div class="g1 g"></div>
            <div class="g2 g"></div>
            <div class="g3 g"></div>
            <div class="g4 g"></div>
            <div class="g5 g"></div>
        </div>
</div>