Columns flex box
6
15%
5
16.5%
4
20%
3
25%
2
35%
1
100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Container</title>
<style>
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
width: 1300px;
margin-left: auto;
margin-right: auto;
}
.container>* {
padding-top: 20px;
padding-bottom: 20px;
background-color: #eee;
flex-grow: 1;
text-align: center;
width: 15%; /* 15.5%, 20%; 25%; 35%, 100%; */
}
</style>
</head>
<body>
<div class="container">
<div>1</div><div>2</div>
<div>3</div><div>4</div>
<div>5</div><div>6</div>
<div>7</div><div>8</div>
<div>9</div><div></div>
<div></div><div></div>
</div>
</body>
</html>
Examples 6, 5, 4 columns
6-3-2 columns
15%
6
25%
3
35%
2
1
2
3
4
5
6
7
8
9
5-3-2
16.5%
5
25%
3
35%
2
1
2
3
4
5
6
7
8
9
4-2-1
20%
20%
35%
35%
100%
100%