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