CSS
.flex {
display: flex;
flex-wrap: wrap;
row-gap: 1rem;
}
.flex > * {
flex: 1;
flex-basis: 30%;
background-color: #ddd;
border: 1px solid #ccc;
padding: .5rem;
}
HTML
<div class="flex">
<div>Flex#1</div>
<div>Flex#2</div>
<div>Flex#3</div>
<div>Flex#4</div>
<div>Flex#5</div>
<div>Flex#6</div>
</div>
表示
Flex#1
Flex#2
Flex#3
Flex#4
Flex#5
Flex#6
CSS
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 1rem;
}
.grid > * {
background-color: #ddd;
border: 1px solid #ccc;
padding: .5rem;
}
HTML
<div class="grid">
<div>Grid#1</div>
<div>Grid#2</div>
<div>Grid#3</div>
<div>Grid#4</div>
<div>Grid#5</div>
<div>Grid#6</div>
</div>
表示
Grid#1
Grid#2
Grid#3
Grid#4
Grid#5
Grid#6