https://codesandbox.io/s/frosty-water-fintki
As you can see in attached sandbox I have a scrollable div with 6 items aligned in 2 rows.
But when you switch to mobile view (toggle responsive view button near sandbox url input) it starts scrolling vertically.
I’ve noticed, that if you remove flex-wrap
it works correctly, but I need this to make 2 rows.
How can I get same behaviour for mobile and desktop?
Advertisement
Answer
CSS grid will give you easier (IMHO) control over the layout when you have to consider 2 dimensions.
Here’s a simple example using your sizing of the elements.
JavaScript
x
17
17
1
.wrapper {
2
display: grid;
3
width: 100vw;
4
grid-template-columns: repeat(3, 1fr);
5
gap: 14px;
6
}
7
8
.button-item {
9
background-color: red;
10
width: 170px;
11
height: 146px;
12
border-radius: 27px;
13
display: flex;
14
justify-content: center;
15
align-items: center;
16
margin: 0 auto;
17
}
JavaScript
1
8
1
<div class="wrapper">
2
<div class="button-item">1</div>
3
<div class="button-item">2</div>
4
<div class="button-item">3</div>
5
<div class="button-item">4</div>
6
<div class="button-item">5</div>
7
<div class="button-item">6</div>
8
</div>