How to keep css grid layout the same on resize

Question

I've asked a similar question before, but unfortunately I'm still having an issue with css grid:

I am trying to keep css grid mosaic layout the same on resize.

Example :

In this website ( https://airtifact.heythemers.com/ ), the layout is not changing on resize. The width and height are relative to each other as it is, and then it breaks with media queries.

In my code, the images' widths are not resizing along with their heights, so on resize the height is staying the same. I want it to keep the aspect ratio, just like the example above.

HTML

<main>
    <div class="grid">
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Bori Bianka Jewelry</h1>
                        <p>Art Direction, Illustration, Advertising</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 1 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Upton</h1>
                        <p>Branding, Creative Direction, Packaging</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 2 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Nike / Ganar te la Pela</h1>
                        <p>Art Direction, Illustration, Advertising</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 3 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Guajira</h1>
                        <p>Art Direction, Branding, Graphic Design</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 4 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>La Cocinería</h1>
                        <p>Branding, Architecture</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 5 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>NIKE 4D Executive Offices</h1>
                        <p>Digital Art, Drawing, Illustration</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 6 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Cta18</h1>
                        <p>Branding, Art Direction, Motion Graphics</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 7 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Foodiest</h1>
                        <p>Branding</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 8 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Fabulous</h1>
                        <p>Illustration</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 9 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Zertouche</h1>
                        <p>Art Direction, Branding, Print design</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 10 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Sweet Dough </h1>
                        <p>Art Direction, Branding, Packaging</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 11 ends -->
    </div>
</main>

CSS

figure {
    width: 100%;
    height: 100%;
    margin: 0;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
main {
  width: 90vw;
  margin: 0 auto;
}
.grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 30vh;
    grid-column-gap: 3vw;
    grid-row-gap: 30vh;
}
.grid article:first-of-type {
    grid-column: 1/4;
    grid-row: 1 / 3;
}
.grid article:nth-child(2) {
    grid-column: 4/6;
    grid-row: 1 / 2;
}
.grid article:nth-child(3) {
    grid-column: 1/4;
}
.grid article:nth-child(4) {
    grid-column: 4/6;
}
.grid article:nth-child(5) {
    grid-column: 1/3;
}
.grid article:nth-child(6) {
    grid-column: 3/6;
    grid-row: 4/6;
}
.grid article:nth-child(7) {
    grid-column: 1/3;
    grid-row: 6/7;
}
.grid article:nth-child(8) {
    grid-column: 3/5;
    grid-row: 6/7;
}
.grid article:nth-child(9) {
    grid-column: 5/6;
    grid-row: 6/7;
}
.grid article:nth-child(10) {
    grid-column: 1/4;
    grid-row: 7/9;
}
.grid article:nth-child(11) {
    grid-column: 4/6;
    grid-row: 7/8;
}
.grid article a {
    text-decoration: none;
    color: #474747;
}
.grid article h1 {
    font-size: 2.2rem;
    letter-spacing: 0.3rem;
    font-weight: lighter;
}
.grid article p {
    font-size: 0.7rem;
    letter-spacing: 0.1rem;
}
.grid figcaption {
    padding: 50px 0;
}

tao · Accepted Answer · 2019-01-27T17:33:20.730

That's caused by using vw as a unit for sizing your grid. Which means when the device screen height changes, the grid changes.

To keep the h/w ratio of an HTML element you can use percentile bottom-padding, because it's designed specifically for this purpose and it's a percentage of the element's width, not of its height.

So you could give <main> a particular ratio using: padding-bottom: 45% (approx).

Now, in order to size your grid according to the size of <main> you'll need to position it absolute:

main {
  position: relative;
  padding-bottom: 45%;
}
.grid {
  position: absolute;
  top: 0;
  bottom: 0;
  /* also change the `vh` to `%` */
  grid-auto-rows: 30%;
  grid-column-gap: 3%;
  grid-row-gap: 30%;
}

Working example:

figure {
    width: 100%;
    height: 100%;
    margin: 0;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
main {
  width: 90vw;
  margin: 0 auto;
  position: relative;
  padding-bottom: 42%;
}
.grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 30%;
    grid-column-gap: 3%;
    grid-row-gap: 30%;
    position: absolute;
    top: 0;
    bottom: 0;
}
.grid article:first-of-type {
    grid-column: 1/4;
    grid-row: 1 / 3;
}
.grid article:nth-child(2) {
    grid-column: 4/6;
    grid-row: 1 / 2;
}
.grid article:nth-child(3) {
    grid-column: 1/4;
}
.grid article:nth-child(4) {
    grid-column: 4/6;
}
.grid article:nth-child(5) {
    grid-column: 1/3;
}
.grid article:nth-child(6) {
    grid-column: 3/6;
    grid-row: 4/6;
}
.grid article:nth-child(7) {
    grid-column: 1/3;
    grid-row: 6/7;
}
.grid article:nth-child(8) {
    grid-column: 3/5;
    grid-row: 6/7;
}
.grid article:nth-child(9) {
    grid-column: 5/6;
    grid-row: 6/7;
}
.grid article:nth-child(10) {
    grid-column: 1/4;
    grid-row: 7/9;
}
.grid article:nth-child(11) {
    grid-column: 4/6;
    grid-row: 7/8;
}
.grid article a {
    text-decoration: none;
    color: #474747;
}
.grid article h1 {
    font-size: 3.2vw;
    letter-spacing: 0.3vw;
    font-weight: lighter;
}
.grid article p {
    font-size: 0.7rem;
    letter-spacing: 0.1rem;
}
.grid figcaption {
    padding: 0;
}

<main>
    <div class="grid">
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Bori Bianka Jewelry</h1>
                        <p>Art Direction, Illustration, Advertising</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 1 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Upton</h1>
                        <p>Branding, Creative Direction, Packaging</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 2 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Nike / Ganar te la Pela</h1>
                        <p>Art Direction, Illustration, Advertising</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 3 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Guajira</h1>
                        <p>Art Direction, Branding, Graphic Design</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 4 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>La Cocinería</h1>
                        <p>Branding, Architecture</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 5 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>NIKE 4D Executive Offices</h1>
                        <p>Digital Art, Drawing, Illustration</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 6 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Cta18</h1>
                        <p>Branding, Art Direction, Motion Graphics</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 7 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Foodiest</h1>
                        <p>Branding</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 8 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Fabulous</h1>
                        <p>Illustration</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 9 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Zertouche</h1>
                        <p>Art Direction, Branding, Print design</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 10 ends -->
        <article>
            <a href="">
                <figure>
                    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/01/20/16/dakar-rally-main.jpg?w645" alt="">
                    <figcaption>
                        <h1>Sweet Dough </h1>
                        <p>Art Direction, Branding, Packaging</p>
                    </figcaption>
                </figure>
            </a>
        </article>
        <!-- Project 11 ends -->
    </div>
</main>

Note I also changed the font-size of your h1s to be width dependent. And I removed the px top padding, as it tended to break the layout at smaller widths.

Btw is there is away to make the main take full height of its content now ? since absolute position took all the articles out of the flow — Taste of Leaving, Jan 27 '19 at 22:02
I don't see a way to do that easily. In fact, I tried to calculate it using JavaScript. It works fine on `window.load` but for some reason it gets all messed up on `window.resize`. Thinking about it, I'm wondering if dumping `position:absolute` and using `vw` (as opposed to the initial `vh`) wouldn't be a better solution. [Here's](https://jsfiddle.net/websiter/ko4tsj95/) what I'm talking about. — tao, Jan 28 '19 at 02:31
well yea that's working better i guess, thank you for all the time you put into fixing this — Taste of Leaving, Jan 28 '19 at 13:13

score 1 · Answer 2 · answered Jan 09 '20 at 09:40

1

the key is probably grid-template-columns: repeat(3, 1fr);

this answer helped me: Can I emulate CSS grids with dynamic number of cells/rows in JavaScript?

answered Jan 09 '20 at 09:40

Eran Or

1,252
15
22

How to keep css grid layout the same on resize

2 Answers2