i have a container that contains 6 items and i want 3 items of the exact same size in each row
i have a container that contains 6 items and i want 3 items of the exact same size in each rows ( i have 2 rows ). how should i do it?
17 Replies
grid might be the best option
everyone is saying that :((
is there any alternative
Why do you need an alternative? This is exactly what grid, in its simplest state, is for.
You could do it with flex, tables, floats, absolutely positioned elements.... but they would all be far more complicated than using a grid and most of them would break as soon as the viewport size changes.
oh wow
i didnt know that
i had a reason for not using grid, i explained it in another server wait let me copy paste
"to be honest i wanted to learn using grid
but an experienced person told me that he never uses grid because flexbox offers him everything that grid does
is that true?"
maybe you can use html table but not the best idea if you really don't want to use grid
and to be honest i don't use grid either but I should in some cases it would save me a lot of time and useless css
flexbox and grid, whilst similar in that they are containers that can contain multiple elements are different in that, at their names suggest, flex elements are "flexible" (ie their sizes can flex according to their contents) whereas grids are just that - grids. As Kevin often says, with flexbox the children define the sizes, with grid the parent defines the sizes.
To achieve what you want to do with flexbox is possible but it always going to be more complicated than using grid as the slightest thing can "break" the layout.
With a grid you just define the number of columns, their widths and likewise with the rows. The child content should not normally influence the layout.
If somebody says that they use flexbox as if offers them everything that grid does then it is most likely that they don't really understand how grid works.
oh thanks, this was helpful
take a look a html table or css grid I think both could work
I hate hearing stuff like that. He is objectively wrong
Flexbox can work multiple rows with flex-wrap: wrap;
It is good when you need the 2nd row item being at a specific position when the row isn't filled fully. (like a 3 item per row setup but the last row only have 2 items being centralized).
Example where flexbox is preferred over grid (imo). A grid of logos where each logo is of different widths, and have to centralize the last row.
----------
If all items are of the same width, like a group of cards for instance, Grid offers more flexibility over flexbox, it can even help with vertical alignment of the elements within the card itself too.
For your 3 columns and 2 rows - a quick demo using grid and flexbox:
https://codepen.io/cbolson/pen/eYaqRZZ
As you should be able see, grid is just made for this sort of thing.
i didnt find any difference between the two
They look the same because I have coded them both to full-fill your requirements.
The difference is that for the flexbox method you have to "force" the sizes of the boxes whereas with grid this is defined by the parent.
However this isn't really the idea behind flexbox, the flex elements should, by definition, be allowed to "flex".
I am not saying that grid is better than flexbox. They both have their uses which often overlap. However, in your use case, I feel that grid is the correct method as what you need it is exactly what it is designed for.
If your brief was for "multiple elements of varying widths on numerous columns", I would suggest using flex.
oh your right
i just realized this
thanks alot for helping me out😀
if flexbox would offer everything grid does there would be no reason for grid to exist. grid was developed later i might add 😉
i love when devs limit their possibilities for some dumb arbitrary reason 😛
I was about to write: Wait for Kevin’s response. He loves grid.
Btw we have a similar person at work. He’s like: flex is better than grid. Grid is too complex 😀
wow guys grid is really amazing
its like i gained a special weapon that unlocks at level 100