grid 布局的六个麻将：未完待续

站长

2022年12月11日 09:02 · 阅读数 37

前言

上次用 flex 布局写了 9 个麻将，一直想尝试用 grid 布局来写。今天终于有兴致试试，翻了一圈资料，麻了，先写几个简单的吧。 grid 布局的六个麻将：未完待续

基础布局

<body>
    <!-- 一饼 -->
    <div class="container container1">
        <div class="item"></div>
    </div>
    <!-- 二饼 -->
    <div class="container container2">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <!-- 四饼 -->
    <div class="container container4">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <!-- 六饼 -->
    <div class="container container6">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <!-- 八饼 -->
    <div class="container container8">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <!-- 九饼 -->
    <div class="container container9">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

公共样式

<style>
        /* 公共样式 */
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .container {
            display: grid;
            float: left;
            width: 80px;
            height: 100px;
            margin: 20px  20px;
            border-radius: 5px;
            background-color: #ccc;
        }
        .item {
            background-color: red;
            border-radius: 50%;
        }
</style>

初始效果

哈哈，挤一坨了，像弹簧，还挺有趣！ grid 布局的六个麻将：未完待续

一饼

        /* 一饼 */
        .container1 {
            grid-template-columns: 50px;
            padding: 25px 15px;
        }

grid 布局的六个麻将：未完待续

二饼

        /* 二饼 */
        .container2 {
            grid-template-columns: 30px;
            grid-gap: 10px;
            padding: 15px 25px;
        }

grid 布局的六个麻将：未完待续

四饼

        /* 四饼 */
        .container4 {
            grid-template-columns: 25px 25px;
            grid-gap: 20px;
            padding: 15px 5px;
        }

grid 布局的六个麻将：未完待续

六饼

        /* 六饼 */
        .container6 {
            grid-template-columns: 20px 20px;
            grid-gap: 10px 20px;
            padding: 10px;
        }

grid 布局的六个麻将：未完待续

八饼

        /* 八饼 */
        .container8 {
            grid-template-columns: 20px 20px;
            grid-gap: 5px 20px;
            padding: 2.5px 10px;
        }

grid 布局的六个麻将：未完待续

九饼

        /* 九饼 */
        /* 紧凑一些 */
        /* .container9 {
            grid-template-columns:20px 20px 20px;
            grid-gap: 10px 0px;
            padding: 10px;
        } */
        /* 松弛一些 */
        .container9 {
            grid-template-columns:20px 20px 20px;
            grid-gap: 10px 5px;
            padding: 10px 5px;
        }

grid 布局的六个麻将：未完待续

转载自:https://juejin.cn/post/7086859813770133535