adjusting rows and columns using css and flexboxes

Issue

I am trying to create a series of boxes like those in the image that automatically adjust the # of rows and columns based on the view width. So, for example 3 columns and 2 rows when they will fit but if the view width is too narrow than it should change to 2 columns and 3 rows, etc. (the box sizes should NOT grow or shrink, I will handle that separately using media queries). I am new to this so any examples would be very helpful. If possible I would like to use flexboxes for this as opposed to tables, but any solution appreciated. example pic of desired result

Solution

Try this:

.box {
  width: 500px;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid green;
  font-size: 30px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1500px;
}

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

The container element is set to display: flex; with flex-wrap: wrap, which means that if there is no more space to put it's children next to each other, they will wrap to the next line.

Answered By - Rene van den Berg