How would I make this grid responsive?

Code: https://jsfiddle.net/j6xL8yop/3/

.grid {
  width: 699px;
  height: 393px;
  margin: 5%;
  display: grid;
  grid-template-columns: auto auto;
  background-color: black;
}

.item1 {
  background-color: blue;
}

.item2 {
  background-color: red;
}

.item3 {
  background-color: green;
}

.item4 {
  background-color: orange;
}
<div class="grid">

  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
  <div class="item4"></div>

</div>

Depends on what you mean by responsive. Should the squares just shrink or should they stack at some point?

They should shrink and not stack

Why did you give them a fixed px value for the width then?

Edit: use max-width for the grid if you want it to shrink.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.