Empty grid rows throwing off the layout

Get Help
#1

After following the exercise on setting up a grid my website layout does not look like the example. The reason is because my empty rows in the grid are all collapsed, while in the example all the empty grid rows have a fixed height. Why is this? My css is the same as the instructors?

#2

From my experience the empty portions come from content not defined in your grid area. You may have too many divs

#3

Hello @aaronwilson001600602 , welcome to the forums! Could you post you full code, please? Remember to format it according to this guide.

#4

Heres the index.html:

<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700|Roboto+Slab:300,400" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="reset.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>

<body>
<div id = "app">

    <div class="headLine">
        <img src="https://content.codecademy.com/courses/learn-css-grid/project-iii/media/group-2.png">
        <p> An architecture blog </p>
    </div>

    <!-- the grid -->
    <div class="grid">
        <!--   section 1 -->
        <div class="box a">
            <img  src="https://content.codecademy.com/courses/learn-css-grid/project-iii/media/pexels-big.jpg">
        </div>
        <div class="box b title">
            Repurposed Living
        </div>
        <div class="box c">
            Bassicarella Architectes, Hamburg, Germany Repurposed Housing
        </div>

        <!--   section 2 -->
        <div class="box d">
            <img  src = "https://content.codecademy.com/courses/learn-css-grid/project-iii/media/pexels-2.jpg">
        </div>
        <div class="box e title">
            Angles de Pyramid Interiors
        </div>
        <div class="box f">
            Bassicarella Architectes,
            Madrid, Spain
            Office Building
        </div>

        <!--   section 3-->
        <div class="box g">
            <img  src = "https://content.codecademy.com/courses/learn-css-grid/project-iii/media/pexels-3.jpg">
        </div>
        <div class="box h title">
            Intricate Patter Play
        </div>
        <div class="box i">
            Bassicarella Architectes, Dubai, UAE Museum
        </div>


        <!--   section 4-->
        <div class="box j">
            <img  src = "https://content.codecademy.com/courses/learn-css-grid/project-iii/media/pexels-4.jpg">
        </div>
        <div class="box k title">
            Healing House Path
        </div>
        <div class="box l">
            Bassicarella Architectes,
            Beijing, China
            Temple
        </div>

        <!--   section 5-->
        <div class="box m">
            <img  src = "https://content.codecademy.com/courses/learn-css-grid/project-iii/media/pexels-5.jpg">
        </div>
        <div class="box n title">
            Curved Perfection
        </div>
        <div class="box o">
            Bassicarella Architectes,
            Buenos Aires, Argentina
            Condominium
        </div>
    </div>
</div>
</body>

</html>

And here the style.css:

body {
    font-size: 1.2em;
}

#app {
    width: 90%;
    margin: auto;
}


.grid {
    display: grid;
    width: 900px;
    height: 300px;
    margin: auto;
    grid-template: repeat(30, 1fr) / repeat(12, 1fr);
}

img {
    max-width: 100%;
}

/* set 1: repurposed living */
.a {
    grid-area: 1 / 3 / 5 / 13;
    z-index: 1;
}

.b {
    grid-area: 2 / 2 / 3 / 4;
    z-index: 6;
}

.c {
    grid-area: 4 / 1 / 5 / 4;
    z-index: 6;
}

/* set 2: angles */

.d {
    grid-area: 5 / 1 / 12 / 7;
    z-index: 2;
}

.e {
    grid-area: 7 / 6 / 9 / 10;
    z-index: 6;
}

.f {
    grid-area: 9 / 7 / 10 / 10;
    z-index: 6;
}

/* set 3: pattern play */

.g {
    grid-area: 11 / 3 / 16 / 13;
    z-index: 3;
}

.h {
    grid-area: 12 / 2 / 14 / 5;
    z-index: 6;
}

.i {
    grid-area: 14 / 1 / 15 / 4;
    z-index: 6;
}

/* set 4: healing house */

.j {
    grid-area: 15 / 1 / 22 / 7;
    z-index: 4;
}

.k {
    grid-area: 17 / 6 / 19 / 10;
    z-index: 6;
}

.l {
    grid-area: 19 / 7 / 20 / 9;
    z-index: 6;
}

/* set 5: curved perfection */

.m {
    grid-area: 21 / 3 / 27 / 13;
    z-index: 5;
}

.n {
    grid-area: 22 / 2 / 24 / 5;
    z-index: 6;
}

.o {
    grid-area: 24 / 1 / 26 / 4;
    z-index: 6;
}

.d, .e, .f, .g, .h, .i, .j, .k, .l, .m, .n, .o {
    display: none;
}

.headLine {
    margin-top: 5vh;
    height: 20vh;
    text-align: center;
    font-family: 'Roboto Slab', serif;
    font-weight: 300;
    font-size: 120%;
    margin-bottom: 10vh;
}

.box {
    font-family: 'Roboto Slab', serif;
    font-size: 90%;
}

.title {
    font-weight: 700;
    font-size: 180%;
    font-family: 'Playfair Display', serif;
    text-decoration: underline;
}

/* media queries */

@media (min-width: 1150px) {
    #app {
        width: 80%;
        margin: auto;
    }
}

@media (max-width: 650px) {
    .grid {

    }

    .title {
        width: 65%;
        font-size: 120%;
    }
}
#5

Hello! I’m really sorry for the late response; I’ve been away from my laptop for a while. Could you show me what the website is meant to look like? Also, have you tried using units in your grid-area properties? For example, here:

What units is grid-area using?

#6

No worries for the response. I’m just glad you’re looking at it at all! Here is what the website is supposed to look like: https://content.codecademy.com/courses/learn-css-grid/project-iii/index.html

If you inspect that website you’ll see this css:
.b {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 4;
z-index: 6;

however, i’ve tried that as well. It still collapses any empty row.
As for the units its using, I don’t know. The rows are created using: grid-template: repeat(30, 1fr) / repeat(12, 1fr);
so, every row is supposed to be the same.

1 Like
#7

Oh. Right, grid-area of course. Sorry, it’s been a while since I’ve done any CSS…
I’ll try and have another look as soon as I can.