HTML, CSS: Divs automatically jump into next row

Issue

as the title might suggest - for the most of you - this will be a beginners question: As shown in the image below, I want to insert divs with certain informations inside my parent-div. Whenever a new div would reach or rather cross the border of the parent, it has to move into the next row below!?

• the parent div has no absolute width
• the parent div will be scrollable on the y-axis
• the divs inside have an absolute width (350px)

My Question is: is this even possible? And what do I have to look for?

Thank you and have a great sunday!

Solution

You can use a combination of flex and flex-wrap for this:

#parent {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 1em;
}

.child {
  width: 100px;
  height: 200px;
  background: #cee;
}

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Answered By - yainspan