CODEWITHSUNDEEP
htmlcssflexboxcss-grid
RJorns
RJorns

Reputation: 281

Responsive images in CSS Grid

I am trying to put some pictures in CSS Grid and make it responsive, I have a div with 4 images, and put it in a CSS grid layout. I want them to take up the available space, but not go off screen. I also want to make them resize and even stack as the screen gets smaller. I am not sure what to do here any further. I have tried combining Flexbox and Grid but to no avail. How do I get them to resize and take up space?

CodePen Food Grid

<div class="food-container">
    <img class="food-pic food4" src="https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4fa061122a5ce899fcb5454dae8dbe99&auto=format&fit=crop&w=2850&q=80" alt="">
    <img class="food-pic food2" src="https://images.unsplash.com/photo-1504544750208-dc0358e63f7f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=be3aa106f944edc77c68fcd567c22bbb&auto=format&fit=crop&w=750&q=80" alt="">
    <img class="food-pic food3" src="https://images.unsplash.com/photo-1504185945330-7a3ca1380535?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9f2d35c4ea30a81e428e66c653748f91&auto=format&fit=crop&w=642&q=80" alt="">
    <img class="food-pic food1" src="https://images.unsplash.com/photo-1506354666786-959d6d497f1a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=86c8c1fd5e9e5b384696472a095c42ac&auto=format&fit=crop&w=1650&q=80" alt="">
</div>


body {
  margin: 0;
  box-sizing: border-box
}

.food-container {
  height: 40em;
  display: grid;
  grid-template: 2fr 2fr / 2fr 1fr 1fr;
  grid-auto-flow: row;
  grid-gap: 1em;
  padding: 1em;
}

.food-pic {
  width: auto;
  height: 100%;
  overflow: hidden;
}

.food1 {
  grid-row: 1 / 3;
}

.food 2 {
  grid-column: 2 / 4;
}

.food3 {
  grid-column: 3 / 4;
}

.food4 {
  grid-column: 2 / 4;
}

Upvotes: 2

Views: 2669

Answers (1)

ReSedano
ReSedano

Reputation: 5060

I changed a little your html and CSS trying to work with grid-template-areas 'cause maybe it is more simple also for you to understand the correct position of every element.

The biggest change I did it was to create a div around every image to have more control of them. The property object-fit:cover; set in your imgs tag complete the work.

body {
  margin: 0;
  box-sizing: border-box
}

.food-container {
  max-height: 40em;
  display: grid;
  grid-template: 2fr 2fr / 2fr 1fr 1fr;
  grid-gap: 1em;
  padding:1em;
  grid-template-areas:
  "a d d"
  "a b c"
}

.food1 {
  grid-area: a;
}

.food2 {
  grid-area: b;
}

.food3 {
  grid-area: c;
}

.food4 {
  grid-area: d;
}

.food-container div{
  overflow:hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit:cover;
}
<div class="food-container">
  <div class="food1">
    <img  src="https://images.unsplash.com/photo-1506354666786-959d6d497f1a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=86c8c1fd5e9e5b384696472a095c42ac&auto=format&fit=crop&w=1650&q=80" alt="">
  </div>
  <div class="food2">
    <img  src="https://images.unsplash.com/photo-1504544750208-dc0358e63f7f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=be3aa106f944edc77c68fcd567c22bbb&auto=format&fit=crop&w=750&q=80" alt="">
  </div>
  <div class="food3">
    <img  src="https://images.unsplash.com/photo-1504185945330-7a3ca1380535?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9f2d35c4ea30a81e428e66c653748f91&auto=format&fit=crop&w=642&q=80" alt="">
  </div>
  <div class="food4">
    <img src="https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4fa061122a5ce899fcb5454dae8dbe99&auto=format&fit=crop&w=2850&q=80" alt="">
  </div>
</div>

Upvotes: 4

Related Questions