How Can I Make Four Responsove Children That Change To A 2 By 2 Grid When Making The Window Smaller?

I want to create four children that are next to each other. Now, when the viewport-width gets smaller, these are supposed to collaps to a two by two grid. (Less important: When it

Solution 1:

You can do it with the Grid:

* {margin: 0; padding: 0; box-sizing: border-box}

#parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 x 25% / can also use 1fr 1fr 1fr 1fr or 25% 25% 25% 25%, without the repeat(), fr stands for fraction */grid-gap: 10px; /* 10px horizontal and vertical gap between child elements */width: 960px;
  max-width: 90%;
  font-size: 1rem;
  margin: auto;
  background: green;
}

.child {background: yellow}

@media (max-width: 60rem){
  #parent {
    grid-template-columns: repeat(2, 1fr); /* 2 x 50% / can also use 1fr 1fr or 50% 50%, without the repeat() */
  }
}

@media (max-width: 30rem){
  #parent {
    grid-template-columns: 1fr; /* 1 x 100% / can also use 100% */
  }
}

<divid="parent"><divclass="child"><h1>Lorem ipsum</h1><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed</p></div><divclass="child"><h1>Lorem ipsum</h1><p>Lorem ipsum dolor sit amet, consetetur sadipscing</p></div><divclass="child"><h1>Lorem ipsum</h1><p>Lorem ipsum dolor sit amet, consetetur</p></div><divclass="child"><h1>Lorem ipsum</h1><p>Lorem ipsum dolor sit amet</p></div></div>

Solution 2:

add height property do class .child