How to show only three items per row? - css

Question

I want to created a wrapper component in React, which take a children items, and the wrapper should only show three items per row (inputs, checkboxes, whatever).
And also for bigger screens the cells should not stretch, and items have to be grouped tightly. But when the screen shrinks, items have to wrap and change number of columns.
That's how it should be for bigger screens:
I thought css grid perfectly fits, but I can't find the proper way to do so.

Answer 1

Since you don't have any code shared, this is difficult to answer because we have no reference/starting point of where you are at.
Here is a blitz I put together for you showing a few ways to achieve what I think you need.
EDIT: Here is a snippet of the three options I included.
Option 1: Limit the number of children per parent. Then you can add a flexbox to the parent to control wrapping. Repeat this for how ever many you need.
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div> //repeat
Option 2: Flex Basis
<div class="parent2">
<div class="child2">
<div class="grandchild"></div>
</div>
<div class="child2">
<div class="grandchild"></div>
</div>
</div> // Put your data inside the grandchild component and add a flex basis to the child component
Option 3: Flex and Position
<div class="parent3">
<div class="child3">
<h2>1 </h2>
</div>
<div class="child3">
<h2>2</h2>
</div>
<div class="child3">
<h2>3</h2>
</div>
<div class="spacing"></div>
<div class="child3">
<h2>4 </h2>
</div>
<div class="child3">
<h2>5</h2>
</div>
<div class="child3">
<h2>6</h2>
</div>
</div>
Here are all the styles I used
.parent {
display: flex;
font-size: 0;
flex-wrap: wrap;
margin: 10px;
}
.child {
background: blue;
margin: 10px 0 0 10px;
height: 100px;
width: 100px;
}
/* ....................................... */
.parent2 {
display: flex;
font-size: 0;
flex-wrap: wrap;
margin: 10px;
}
.child2 {
flex-basis: 30%;
background: lightblue;
margin: 10px 0 0 10px;
height: 100px;
width: 100px;
}
.grandchild {
border: 3px solid red;
height: 50px;
width: 50px;
}
/* ....................................... */
.parent3 {
width: 100%;
min-height: 100px;
height: auto;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.child3 {
width: 100px;
height: 100px;
background-color: lightgreen;
margin: 10px;
position: relative;
}
.spacing {
width: 100%;
height: 5%;
}