EN
CSS - How to use flexbox with 3 elements per row keeping last elements position?
1 answers
9 points
I would like to create grid that contains 3 elements per row. I would like to keep elements order even last row have 1 or 2 elements.
Is it possible using only CSS?
1 answer
3 points
You can use spacer elements that are not visible at the end (add columns_count - 1 spacer elements at the end).
Example solution:
xxxxxxxxxx1
<html>2
<head>3
<style>4
5
div.container {6
border: 1px solid red;7
display: flex;8
flex-wrap: wrap;9
}10
11
div.child {12
margin: 10px;13
padding: 10px;14
border: 1px solid red;15
flex: calc(33% - 42px); /* 33% - (margins + paddings + borders) */16
}17
18
div.spacer {19
margin: 0 10px;20
padding: 0 10px;21
flex: calc(33% - 40px); /* 33% - (margins + paddings) */22
}23
24
</style>25
</head>26
<body>27
<div class="container">28
<div class="child">1</div>29
<div class="child">2</div>30
<div class="child">3</div>31
<div class="child">4</div>32
<div class="child">5</div>33
<div class="child">6</div>34
<div class="child">7</div>35
<div class="spacer"></div>36
<div class="spacer"></div>37
</div>38
</body>39
</html>
Other case:
xxxxxxxxxx1
<html>2
<head>3
<style>4
5
div.container {6
border: 1px solid red;7
display: flex;8
flex-wrap: wrap;9
}10
11
div.child {12
margin: 10px;13
padding: 10px;14
border: 1px solid red;15
flex: calc(33% - 42px); /* 33% - (margins + paddings + borders) */16
}17
18
div.spacer {19
margin: 0 10px;20
padding: 0 10px;21
flex: calc(33% - 40px); /* 33% - (margins + paddings) */22
}23
24
</style>25
</head>26
<body>27
<div class="container">28
<div class="child">1</div>29
<div class="child">2</div>30
<div class="child">3</div>31
<div class="child">4</div>32
<div class="child">5</div>33
<div class="child">6</div>34
<div class="child">7</div>35
<div class="child">8</div>36
<div class="spacer"></div>37
<div class="spacer"></div>38
</div>39
</body>40
</html>
0 commentsShow commentsAdd comment
