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.
.wrapper {
display: grid;
width: 100vw;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.button-item {
background-color: red;
width: 170px;
height: 146px;
border-radius: 27px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}<div class="wrapper"> <div class="button-item">1</div> <div class="button-item">2</div> <div class="button-item">3</div> <div class="button-item">4</div> <div class="button-item">5</div> <div class="button-item">6</div> </div>