Search code examples
htmlcsscss-grid

In my CSS the grid propery isn't functioning properly

In all of my HTML, the grid is displaying perfectly, except for in the gallery I'm trying to make. I've tried several things to resolve it, but the grid is not displaying. I'm at a loss now for what's wrong. Please review the code below: 

<!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;
}

Grid system 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;
      }
  }
*/

I've only replaced text in the html with "..." because it revealed my information. Thanks for understanding.

The problem is the top grid with all the div boxes is working fine like a pyramid, but the birds isn't.

Solution

  • edit:

    You should add grid-template-columns: repeat(12, 1fr); on the bird-gallery class too.