Question

在我所有的HTML中，网格都完美显示，除了在我尝试制作的图库中。我尝试了几种方法来解决它，但网格未显示。我现在不知所措。请查看下面的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/grid.css">
    <title>...</title>
</head>

<body>
    <div class="wrapper">

        <nav class="main-nav col-12">
            <h1>...</h1>
            <ul>
                <li><a href="#introduction">...</a></li>
                <li><a href="#steps">...</a></li>
                <li><a href="#grid">...</a></li>
                <li><a href="#birds">...</a></li>
            </ul>

        </nav>

        <header type="banner" class="main-head col-12" id="introduction">
            <h1>...</h1>
            <p>...</p>
        </header>



        <main class="content col-12" id="steps">
            <article>

                <h2>...</h2>

                <p>...</p>

                <p>...</p>
                <ol>
                    <li>..</li>
                    <li>..</li>
                    <li>..</li>
                    <li>..</li>
                    <li>..</li>
                    <li>..</li>
                </ol>
                <h3>...</h3>

                <p>...</p>

                <h3>...</h3>

                <p>...</p>

                <h3>...</h3>

                <p>...</p>

                <div class="col-display col-12">
                    <div class="col-display-box col-12">12</div>
                    <div class="col-display-box col-6">6</div>
                    <div class="col-display-box col-6">6</div>
                    <div class="col-display-box col-4">4</div>
                    <div class="col-display-box col-4">4</div>
                    <div class="col-display-box col-4">4</div>
                    <div class="col-display-box col-3">3</div>
                    <div class="col-display-box col-3">3</div>
                    <div class="col-display-box col-3">3</div>
                    <div class="col-display-box col-3">3</div>
                    <div class="col-display-box col-2">2</div>
                    <div class="col-display-box col-2">2</div>
                    <div class="col-display-box col-2">2</div>
                    <div class="col-display-box col-2">2</div>
                    <div class="col-display-box col-2">2</div>
                    <div class="col-display-box col-2">2</div>
                    <div class="col-display-box col-1">1</div>
                    <div class="col-display-box col-1">1</div>
                    <div class="col-display-box col-1">1</div>
                    <div class="col-display-box col-1">1</div>
                    <div class="col-display-box col-1">1</div>
                    <div class="col-display-box col-1">1</div>
                    <div class="col-display-box col-1">1</div>
                    <div class="col-display-box col-1">1</div>
                    <div class="col-display-box col-1">1</div>
                    <div class="col-display-box col-1">1</div>
                    <div class="col-display-box col-1">1</div>
                    <div class="col-display-box col-1">1</div>
                </div>

                <p>...</p>

            </article>

        </main>

        <section class="grid col-12" id="grid">
            <h2>...</h2>
            <p>...</p>
        </section>

        <section class="birds col-12" id="birds">
            <h2>Exotic Birds</h2>

            <p>...</p>

            <div class="bird-gallery">
                <div class="bird-card col-6"><img src="images/animal-avian-beak-bird-459070.jpg" alt="Great Tit Bird">
                    <h2>Great Tit</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora commodi aliquam at, quidem
                        dolorum ipsum nemo sed molestiae et in ratione sit reprehenderit ex est culpa corporis, quod
                        libero ullam.</p>
                </div>
                <div class="bird-card col-6"><img src="images/animal-avian-beak-bird-459070.jpg" alt="Great Tit Bird">
                    <h2>Great Tit</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora commodi aliquam at, quidem
                        dolorum ipsum nemo sed molestiae et in ratione sit reprehenderit ex est culpa corporis, quod
                        libero ullam.</p>
                </div>

            </div>

        </section>

        <footer class="main-footer col-12">
            <p>...</p>
        </footer>

    </div>

</body>

</html>

CSS（style.css）：

* {
    box-sizing: border-box;
    margin: 0;
}

body {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}

.wrapper p {
    margin: 1rem;
    margin-left: 2rem;
}

.wrapper h1, h2, h3, h4, h5, h6 {
    margin-left: 1rem;
}

.wrapper ol {
    margin-bottom: 1rem;
}

footer {
    background-color: hsla(17, 100%, 50%, 1);
    color: white;
    text-align: center;
    padding: 2rem;
}

nav {
    background-color: hsla(17, 100%, 50%, 1);
    color: white;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
}

nav h1 {
    font-size: 2rem;
}

nav ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
}

nav ul li a {
    text-decoration: none;
    color: white;
}

nav ul li {
    padding: 2rem;
    text-decoration: none;
    transition: background-color 0.5s ease;
}

nav ul li:hover {
    background-color: hsla(17, 100%, 65%, 1);
}

.main-head {
    margin-top: 6rem;
}

/* Col Display */

.col-display {
    display: grid;
    width: 50%;
    margin-left: 5rem;
    padding: 0.5rem 0;
    background-color: hsla(17, 100%, 50%, 0.5);
}

.col-display p {
    color: white;
    text-align: center;
    font-weight: bold;
    margin: 0;
}

.col-display-box {
    height: 2.5rem;
    background-color: hsla(17, 100%, 25%, 0.5);
    border: 1px solid hsla(17, 100%, 15%, 0.5);
    color: white;
    font-weight: bold;
    margin: 0.5rem;
    padding-top: 0.625rem;
    border-radius: 0.5rem;
    text-align: center;
}

/* Bird Gallery */

.bird-gallery {
    display: grid;
    width: 80%;
    margin: 0 auto;
}

.bird-card {
    background-color: hsla(17, 46%, 75%, 1);
}

.bird-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

网格系统CSS（grid.css）：

/* Grid Display */

.wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.col-12 {
    grid-column: span 12;
}

.col-11 {
    grid-column: span 11;
}

.col-10 {
    grid-column: span 10;
}

.col-9 {
    grid-column: span 9;
}

.col-8 {
    grid-column: span 8;
}

.col-7 {
    grid-column: span 7;
}

.col-6 {
    grid-column: span 6;
}

.col-5 {
    grid-column: span 5;
}

.col-4 {
    grid-column: span 4;
}

.col-3 {
    grid-column: span 3;
}

.col-2 {
    grid-column: span 2;
}

.col-1 {
    grid-column: span 1;
}


/* Block display on mobile */
/*
@media screen and (max-width: 575px) {
    .wrapper {
      display: block;
      }
  }
*/

我只将html中的文本替换为“ ...”，因为它显示了我的信息。感谢您的理解。

问题是所有div框的顶部网格都像金字塔一样工作正常，但是鸟却没有。

Answer 1

编辑：

我的错误第一答案太快了。

您还应该在鸟类图库类中添加grid-template-columns: repeat(12, 1fr);。

在我的CSS中，网格属性无法正常运行

1 个答案: