Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
eslam said
Courses Plus Student 6,734 PointsHow to keep css grid layout the same on resize
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
My code the images width are not resizing along with it's height, so on resize the height is staying the same i want 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;
}