Question

在插入图像标签和SVG之前，我先尝试完善网格布局。我添加了媒体查询来更改主体和主要元素的网格布局。

请注意，我注释了section元素中的代码，因为我想在操纵这些网格项中的元素之前先看一下整个网格的布局。

这是我的HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Dashboard</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/normalize.css" rel="stylesheet">
        <link href="css/styles.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/css-toggle-switch@latest/dist/toggle-switch.css" />
    </head>

  <body>

        <header class="header">
            <!-- <h1>YourApp</h1>
            <div class="icon-bell-div">
                <img src="icons/icon-bell.svg">
            </div>
            <div class="profile-name">
                <img src="member-1.jpg">
            </div>
            <p>Josh Sullivan</p> -->
        </header>

        <nav class="side-navigation">
            <!-- <ul class="navigation-items">
                <li><a href="index.html"><img src="icons/icon-dashboard.svg"></a></li>
                <li><a href="index.html"><img src="icons/icon-members.svg"></a></li>
                <li><a href="index.html"><img src="icons/icon-visits.svg"></a></li>
                <li><a href="index.html"><img src="icons/icon-settings.svg"></a></li>
            </ul> -->
        </nav>

        <main>

            <section class="search">
                <h1>Dashboard</h1>
                <input type="search" placeholder="Search"> 
            </section>

            <!-- TRAFFIC-->
            <section class="traffic">
                <!-- <h2>Traffic</h2>
                <nav>
                    <ul>
                        <li>Hourly</li>
                        <li>Daily</li>
                        <li>Weekly</li>
                        <li>Monthly</li>
                    </ul>
                </nav>
                <canvas id="line-chart"></canvas> -->
            </section>

            <!-- DAILY TRAFFIC -->
            <section class="daily-traffic">
                <!-- <h2>Daily Traffic</h2>
                <canvas id="bar-chart"></canvas> -->
            </section> 

            <!-- MOBILE USERS -->
            <section class="mobile-users">
                <!-- <h2>Mobile Users</h2>
                <canvas id="doughnut-chart"></canvas> -->
            </section>

            <!-- SOCIAL STATS-->
            <section class="social-stats">
                <h2>Social Stats</h2>

                <!-- <div class="twitter">  
                    <svg class="twitter-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                    viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
                        <path class="twitter-path" fill="red" d="M32,3.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6C25.8,0.8,24,0,22.2,0
                        c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5C10.3,7.8,5.5,5.2,2.2,1.2c-0.6,1-0.9,2.1-0.9,3.3c0,2.3,1.2,4.3,2.9,5.5
                        c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1
                        c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,3,10.1,3c12.1,0,18.7-10,18.7-18.7
                        c0-0.3,0-0.6,0-0.8C30,5.6,31.1,4.4,32,3.1z"/>
                    </svg>
                </div>

                <div class="facebook">
                    <svg class="facebook-svg" enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <path class="facebook-path" fill="green" d="M40.43,21.739h-7.645v-5.014c0-1.883,1.248-2.322,2.127-2.322c0.877,0,5.395,0,5.395,0V6.125l-7.43-0.029  c-8.248,0-10.125,6.174-10.125,10.125v5.518h-4.77v8.53h4.77c0,10.947,0,24.137,0,24.137h10.033c0,0,0-13.32,0-24.137h6.77  L40.43,21.739z"/>
                    </svg>
                </div>

                <div class="google">
                    <svg class="google-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                    viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
                        <path class="google-path" fill="blue" d="M17.7,25.7c0-0.3,0-0.5-0.1-0.8c-0.1-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.2-0.4-0.3-0.7c-0.2-0.2-0.3-0.4-0.4-0.6
                        c-0.1-0.2-0.3-0.3-0.5-0.6c-0.2-0.2-0.4-0.4-0.5-0.5c-0.1-0.1-0.3-0.3-0.6-0.5c-0.3-0.2-0.5-0.4-0.6-0.4s-0.3-0.2-0.6-0.4
                        c-0.3-0.2-0.5-0.4-0.6-0.4c-0.2,0-0.5,0-1,0c-0.7,0-1.4,0-2,0.1c-0.7,0.1-1.4,0.2-2.1,0.5c-0.7,0.2-1.3,0.5-1.9,0.9s-1,0.8-1.3,1.4
                        c-0.3,0.6-0.5,1.3-0.5,2.1c0,0.9,0.2,1.7,0.7,2.3c0.5,0.7,1.1,1.2,1.8,1.6s1.5,0.7,2.3,0.9s1.6,0.3,2.4,0.3c0.8,0,1.5-0.1,2.2-0.2
                        c0.7-0.2,1.3-0.4,1.9-0.8c0.6-0.3,1.1-0.8,1.4-1.4C17.5,27.2,17.7,26.5,17.7,25.7z M15.4,9.1c0-0.8-0.1-1.6-0.3-2.5
                        c-0.2-0.9-0.5-1.7-0.9-2.5c-0.4-0.8-0.9-1.5-1.6-2c-0.7-0.5-1.5-0.8-2.3-0.8c-1.2,0-2.1,0.4-2.8,1.3c-0.7,0.9-1,1.9-1,3.2
                        c0,0.6,0.1,1.2,0.2,1.9c0.1,0.7,0.4,1.3,0.7,2c0.3,0.7,0.7,1.3,1.1,1.8c0.4,0.5,0.9,1,1.5,1.3c0.6,0.3,1.2,0.5,1.9,0.5
                        c1.2,0,2.1-0.4,2.7-1.2C15.1,11.4,15.4,10.4,15.4,9.1z M12.9,0h8.4l-2.6,1.5h-2.6c0.9,0.6,1.6,1.4,2.1,2.4s0.8,2.1,0.8,3.2
                        c0,0.9-0.1,1.8-0.4,2.5c-0.3,0.7-0.7,1.3-1.1,1.8c-0.4,0.4-0.8,0.9-1.3,1.2c-0.4,0.4-0.8,0.8-1.1,1.2c-0.3,0.4-0.4,0.8-0.4,1.3
                        c0,0.3,0.1,0.7,0.3,1c0.2,0.3,0.5,0.6,0.8,0.9c0.3,0.3,0.7,0.6,1.1,0.9c0.4,0.3,0.8,0.7,1.2,1.1c0.4,0.4,0.8,0.8,1.1,1.3
                        c0.3,0.5,0.6,1,0.8,1.6c0.2,0.6,0.3,1.3,0.3,2c0,2.1-0.9,3.9-2.7,5.4c-1.9,1.7-4.6,2.5-8.1,2.5c-0.8,0-1.5-0.1-2.3-0.2
                        c-0.8-0.1-1.6-0.3-2.3-0.6c-0.8-0.3-1.5-0.7-2.1-1.1c-0.6-0.4-1.1-1-1.5-1.7C1,27.6,0.8,26.9,0.8,26c0-0.8,0.2-1.6,0.7-2.6
                        c0.4-0.8,1-1.5,1.8-2.1c0.8-0.6,1.8-1.1,2.8-1.4c1-0.3,2-0.5,3-0.7c0.9-0.1,1.9-0.2,2.9-0.3c-0.8-1.1-1.2-2-1.2-2.9
                        c0-0.2,0-0.3,0-0.5c0-0.1,0.1-0.3,0.1-0.4c0-0.1,0.1-0.2,0.2-0.4c0.1-0.2,0.1-0.3,0.1-0.4c-0.5,0.1-1,0.1-1.3,0.1
                        c-1.9,0-3.5-0.6-4.9-1.9c-1.4-1.3-2-2.8-2-4.7c0-1.8,0.6-3.4,1.8-4.8C6,1.7,7.5,0.8,9.3,0.4C10.5,0.1,11.7,0,12.9,0z M32.8,4.9v2.5
                        h-4.9v4.9h-2.5V7.4h-4.9V4.9h4.9V0h2.5v4.9H32.8z"/>
                    </svg>
                </div> -->

            </section>

            <!-- NEW MEMBERS -->
            <section class="new-members">
                <!-- <div class="member">
                    <img src="images/member-1.jpg">
                </div>

                <div class="member">
                    <img src="images/member-2.jpg">
                </div>

                <div class="member">
                    <img src="images/member-3.jpg">
                </div>

                <div class="member">
                    <img src="images/member-4.jpg">
                </div> -->

            </section>


            <!--RECENT ACTIVITY-->
            <section class="recent-activity">

                <!-- <div class="member">
                    <img src="images/member-1.jpg">
                </div>

                <div class="member">
                    <img src="images/member-2.jpg">
                </div>

                <div class="member">
                    <img src="images/member-3.jpg">
                </div>

                <div class="member">
                    <img src="images/member-4.jpg">
                </div> -->

            </section>

            <!-- MESSAGE USERS -->
            <section class="message-users">
                <!-- <input type="search" id="site-search" placeholder="Search for User">
                <textarea rows="10" cols="50" placeholder="Message for User"></textarea>
                <input type="submit" id="site-search" value="Send"> -->
            </section>

            <!-- SETTINGS -->
            <section class="settings">

                <!-- <label class="switch-light switch-ios" onclick="">
                <input type="checkbox">
                <strong class="switch-light-text">
                    Send Email Notifications
                </strong>
                <span class="switch-light-span">
                    <span>Off</span>
                    <span>On</span>
                    <a></a>
                </span>
                </label>

                <label class="switch-light switch-ios" onclick="">
                <input type="checkbox">
                <strong class="switch-light-text">
                    Set Profile to Public
                </strong>
                <span class="switch-light-span">
                    <span>Off</span>
                    <span>On</span>
                    <a></a>
                </span>
                </label>

                <select name="timezone">
                    <option value="volvo" selected>Select a Timezone</option>
                    <option value="volvo">Volvo</option>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="fiat">Fiat</option>
                    <option value="audi">Audi</option>
                </select>

                <div class="buttons">
                    <button>Save</button>
                    <button>Cancel</button>
                </div> -->

            </section>

        </main>

    </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script> 
    <script src="app.js"></script>
</html>

这是我的CSS：

* {
    box-sizing: border-box;
}
/*MOBILE */
header {
    grid-area: header;
}
.side-navigation {
    grid-area: navigation;
}
main {
    grid-area: main;
}
/*NON-MOBILE */
.search {
    grid-area: search;
}
.traffic {
    grid-area: traffic;
}
.daily-traffic {
    grid-area: daily-traffic;
}
.mobile-users {
    grid-area: mobile-users;
}
.social-stats {
    grid-area: social-stats;
}
.new-members {
    grid-area: new-members;
}
.recent-activity {
    grid-area: recent-activity;
}
.message-users {
    grid-area: message-users;
}
.settings {
    grid-area: settings;
}

/*BODY GRID*/
body {
    display: grid;
    grid-template-rows: 80px 80px 1fr;
    grid-template-areas:
    "header"
    "navigation"
    "main";
}

header {
    background-color: #7279C2;
}
.side-navigation {
    background-color: #4D4A77;
}
main {
    background-color: white;
}

@media (min-width: 768px) {
    body {
        grid-template-rows: 80px 1fr;
        grid-template-columns: 80px 1fr;
        grid-template-areas: 
        "header header"
        "navigation main"
    }
    main {
        border: 2px blue solid;
    }

    main {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 6fr 5fr 3fr 1fr 1fr;
        grid-template-areas: 
        "search search"
        "traffic traffic"
        "daily-traffic mobile-users"
        "social-stats social-stats"
        "new members recent-activity"
        "message-users settings";
    } 
}

因此，如果我的媒体查询有效，那么如果其中包含多个网格项目，为什么主网格容器无法正确展开。

在这里您可以看到仪表板和社会地位标题像这样杂乱无章。为什么会这样？

Answer 1

因为您的grid-template-rows定义未反映在您的grid-template-areas定义中（您必须指定相同数量的单位！），并且您没有定义grid-template-rows属性。

* {
    box-sizing: border-box;
}
/*MOBILE */
header {
    grid-area: header;
}
.side-navigation {
    grid-area: navigation;
}
main {
    grid-area: main;
}
/*NON-MOBILE */
.search {
    grid-area: search;
}
.traffic {
    grid-area: traffic;
}
.daily-traffic {
    grid-area: daily-traffic;
}
.mobile-users {
    grid-area: mobile-users;
}
.social-stats {
    grid-area: social-stats;
}
.new-members {
    grid-area: new-members;
}
.recent-activity {
    grid-area: recent-activity;
}
.message-users {
    grid-area: message-users;
}
.settings {
    grid-area: settings;
}

/*BODY GRID*/
body {
    display: grid;
    grid-template-rows: 80px 1fr;
    grid-template-columns: 80px 1fr;
    grid-template-areas:
    "header header"
    "navigation main";
    height: 100vh;
}

header {
    background-color: #7279C2;
}
.side-navigation {
    background-color: #4D4A77;
}
main {
    background-color: white;
}

        <header class="header">
            <!-- <h1>YourApp</h1>
            <div class="icon-bell-div">
                <img src="icons/icon-bell.svg">
            </div>
            <div class="profile-name">
                <img src="member-1.jpg">
            </div>
            <p>Josh Sullivan</p> -->
        </header>

        <nav class="side-navigation">
            <!-- <ul class="navigation-items">
                <li><a href="index.html"><img src="icons/icon-dashboard.svg"></a></li>
                <li><a href="index.html"><img src="icons/icon-members.svg"></a></li>
                <li><a href="index.html"><img src="icons/icon-visits.svg"></a></li>
                <li><a href="index.html"><img src="icons/icon-settings.svg"></a></li>
            </ul> -->
        </nav>

        <main>

            <section class="search">
                <h1>Dashboard</h1>
                <input type="search" placeholder="Search"> 
            </section>

            <!-- TRAFFIC-->
            <section class="traffic">
                <!-- <h2>Traffic</h2>
                <nav>
                    <ul>
                        <li>Hourly</li>
                        <li>Daily</li>
                        <li>Weekly</li>
                        <li>Monthly</li>
                    </ul>
                </nav>
                <canvas id="line-chart"></canvas> -->
            </section>

            <!-- DAILY TRAFFIC -->
            <section class="daily-traffic">
                <!-- <h2>Daily Traffic</h2>
                <canvas id="bar-chart"></canvas> -->
            </section> 

            <!-- MOBILE USERS -->
            <section class="mobile-users">
                <!-- <h2>Mobile Users</h2>
                <canvas id="doughnut-chart"></canvas> -->
            </section>

            <!-- SOCIAL STATS-->
            <section class="social-stats">
                <h2>Social Stats</h2>

                <!-- <div class="twitter">  
                    <svg class="twitter-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                    viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
                        <path class="twitter-path" fill="red" d="M32,3.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6C25.8,0.8,24,0,22.2,0
                        c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5C10.3,7.8,5.5,5.2,2.2,1.2c-0.6,1-0.9,2.1-0.9,3.3c0,2.3,1.2,4.3,2.9,5.5
                        c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1
                        c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,3,10.1,3c12.1,0,18.7-10,18.7-18.7
                        c0-0.3,0-0.6,0-0.8C30,5.6,31.1,4.4,32,3.1z"/>
                    </svg>
                </div>

                <div class="facebook">
                    <svg class="facebook-svg" enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <path class="facebook-path" fill="green" d="M40.43,21.739h-7.645v-5.014c0-1.883,1.248-2.322,2.127-2.322c0.877,0,5.395,0,5.395,0V6.125l-7.43-0.029  c-8.248,0-10.125,6.174-10.125,10.125v5.518h-4.77v8.53h4.77c0,10.947,0,24.137,0,24.137h10.033c0,0,0-13.32,0-24.137h6.77  L40.43,21.739z"/>
                    </svg>
                </div>

                <div class="google">
                    <svg class="google-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                    viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
                        <path class="google-path" fill="blue" d="M17.7,25.7c0-0.3,0-0.5-0.1-0.8c-0.1-0.2-0.1-0.5-0.2-0.7c-0.1-0.2-0.2-0.4-0.3-0.7c-0.2-0.2-0.3-0.4-0.4-0.6
                        c-0.1-0.2-0.3-0.3-0.5-0.6c-0.2-0.2-0.4-0.4-0.5-0.5c-0.1-0.1-0.3-0.3-0.6-0.5c-0.3-0.2-0.5-0.4-0.6-0.4s-0.3-0.2-0.6-0.4
                        c-0.3-0.2-0.5-0.4-0.6-0.4c-0.2,0-0.5,0-1,0c-0.7,0-1.4,0-2,0.1c-0.7,0.1-1.4,0.2-2.1,0.5c-0.7,0.2-1.3,0.5-1.9,0.9s-1,0.8-1.3,1.4
                        c-0.3,0.6-0.5,1.3-0.5,2.1c0,0.9,0.2,1.7,0.7,2.3c0.5,0.7,1.1,1.2,1.8,1.6s1.5,0.7,2.3,0.9s1.6,0.3,2.4,0.3c0.8,0,1.5-0.1,2.2-0.2
                        c0.7-0.2,1.3-0.4,1.9-0.8c0.6-0.3,1.1-0.8,1.4-1.4C17.5,27.2,17.7,26.5,17.7,25.7z M15.4,9.1c0-0.8-0.1-1.6-0.3-2.5
                        c-0.2-0.9-0.5-1.7-0.9-2.5c-0.4-0.8-0.9-1.5-1.6-2c-0.7-0.5-1.5-0.8-2.3-0.8c-1.2,0-2.1,0.4-2.8,1.3c-0.7,0.9-1,1.9-1,3.2
                        c0,0.6,0.1,1.2,0.2,1.9c0.1,0.7,0.4,1.3,0.7,2c0.3,0.7,0.7,1.3,1.1,1.8c0.4,0.5,0.9,1,1.5,1.3c0.6,0.3,1.2,0.5,1.9,0.5
                        c1.2,0,2.1-0.4,2.7-1.2C15.1,11.4,15.4,10.4,15.4,9.1z M12.9,0h8.4l-2.6,1.5h-2.6c0.9,0.6,1.6,1.4,2.1,2.4s0.8,2.1,0.8,3.2
                        c0,0.9-0.1,1.8-0.4,2.5c-0.3,0.7-0.7,1.3-1.1,1.8c-0.4,0.4-0.8,0.9-1.3,1.2c-0.4,0.4-0.8,0.8-1.1,1.2c-0.3,0.4-0.4,0.8-0.4,1.3
                        c0,0.3,0.1,0.7,0.3,1c0.2,0.3,0.5,0.6,0.8,0.9c0.3,0.3,0.7,0.6,1.1,0.9c0.4,0.3,0.8,0.7,1.2,1.1c0.4,0.4,0.8,0.8,1.1,1.3
                        c0.3,0.5,0.6,1,0.8,1.6c0.2,0.6,0.3,1.3,0.3,2c0,2.1-0.9,3.9-2.7,5.4c-1.9,1.7-4.6,2.5-8.1,2.5c-0.8,0-1.5-0.1-2.3-0.2
                        c-0.8-0.1-1.6-0.3-2.3-0.6c-0.8-0.3-1.5-0.7-2.1-1.1c-0.6-0.4-1.1-1-1.5-1.7C1,27.6,0.8,26.9,0.8,26c0-0.8,0.2-1.6,0.7-2.6
                        c0.4-0.8,1-1.5,1.8-2.1c0.8-0.6,1.8-1.1,2.8-1.4c1-0.3,2-0.5,3-0.7c0.9-0.1,1.9-0.2,2.9-0.3c-0.8-1.1-1.2-2-1.2-2.9
                        c0-0.2,0-0.3,0-0.5c0-0.1,0.1-0.3,0.1-0.4c0-0.1,0.1-0.2,0.2-0.4c0.1-0.2,0.1-0.3,0.1-0.4c-0.5,0.1-1,0.1-1.3,0.1
                        c-1.9,0-3.5-0.6-4.9-1.9c-1.4-1.3-2-2.8-2-4.7c0-1.8,0.6-3.4,1.8-4.8C6,1.7,7.5,0.8,9.3,0.4C10.5,0.1,11.7,0,12.9,0z M32.8,4.9v2.5
                        h-4.9v4.9h-2.5V7.4h-4.9V4.9h4.9V0h2.5v4.9H32.8z"/>
                    </svg>
                </div> -->

            </section>

            <!-- NEW MEMBERS -->
            <section class="new-members">
                <!-- <div class="member">
                    <img src="images/member-1.jpg">
                </div>

                <div class="member">
                    <img src="images/member-2.jpg">
                </div>

                <div class="member">
                    <img src="images/member-3.jpg">
                </div>

                <div class="member">
                    <img src="images/member-4.jpg">
                </div> -->

            </section>


            <!--RECENT ACTIVITY-->
            <section class="recent-activity">

                <!-- <div class="member">
                    <img src="images/member-1.jpg">
                </div>

                <div class="member">
                    <img src="images/member-2.jpg">
                </div>

                <div class="member">
                    <img src="images/member-3.jpg">
                </div>

                <div class="member">
                    <img src="images/member-4.jpg">
                </div> -->

            </section>

            <!-- MESSAGE USERS -->
            <section class="message-users">
                <!-- <input type="search" id="site-search" placeholder="Search for User">
                <textarea rows="10" cols="50" placeholder="Message for User"></textarea>
                <input type="submit" id="site-search" value="Send"> -->
            </section>

            <!-- SETTINGS -->
            <section class="settings">

                <!-- <label class="switch-light switch-ios" onclick="">
                <input type="checkbox">
                <strong class="switch-light-text">
                    Send Email Notifications
                </strong>
                <span class="switch-light-span">
                    <span>Off</span>
                    <span>On</span>
                    <a></a>
                </span>
                </label>

                <label class="switch-light switch-ios" onclick="">
                <input type="checkbox">
                <strong class="switch-light-text">
                    Set Profile to Public
                </strong>
                <span class="switch-light-span">
                    <span>Off</span>
                    <span>On</span>
                    <a></a>
                </span>
                </label>

                <select name="timezone">
                    <option value="volvo" selected>Select a Timezone</option>
                    <option value="volvo">Volvo</option>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="fiat">Fiat</option>
                    <option value="audi">Audi</option>
                </select>

                <div class="buttons">
                    <button>Save</button>
                    <button>Cancel</button>
                </div> -->

            </section>

        </main>

为什么尽管有多个网格项，我的网格容器仍无法展开？

1 个答案: