Question

Question

https://sololearn.com/compiler-playground/WqPCEQAa0J35/?ref=app
Wanna make the drinks appear in rows

Answer 1

Mariam Abdelrahman Since you have not added your Food section, I am not sure of your overall design goals.

If you are trying to make a menu,
With a drinks section followed by a food section below it,
You could change <main> to flex-direction:column.

For the actual drinks section, you want to style #drinks (the entire drinks section).
You could style it as row flex with
direction:flex;
flex-wrap:wrap;
and appropriate gap.

That would have your drinks in row (default flex direction) with as many drinks as will fit on the screen and wrapping to next row as needed.

Alternatively you could use display:grid instead of display:flex for more structured 2D layout.

The display:grid on the .drinks (individual drink squares) is pointless.
display:flex and display:grid are used on the container element, not the individual items.

If your goal is an online order site and not just a menu, you can change the individual drinks from <div class="drinks"> to <button type="button" class="drinks">

Answer 2

Shardis Wolfe thank you so much🥰