How would I make this grid responsive?


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


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.