flex vs grid for HTML forms and inputs?
Which one is recommended as of 2024? I see a lot of examples of laying out from elements, like this:
https://www.starterapp.style/
where the flex box is the only one used. But I am afraid this is not where CSS is going... I have a feeling that grid/sub grid is the better way forward.
Do you have any experiences one way or the other to share and
CSS Starter
A starter app highlighting patterns to use in a vanilla CSS app
21 Replies
flex and grid aren't replacements for each other, you use whichever is best for the situation you're in
learn both, learn the strengths of both, and then you'll be able to figure out when to use which tool
as for HTML Forms, it still fully depends on how you want to lay out your form. Sometimes one will be better, sometimes the other.
Thanks @Jochem , I think I know both flex and grid reasonably well and can make them work, but was trying to get past the "it depends, try both". I need to build 10+ forms for a specific question/answer workflow and do not want to look at them at the end and say "jeez I should have used grid instead of flex, what a waste!". Looking for someone already "been there, done that" whith all the scars and wisdom
without a design its very hard to just say either or
cause it very much is a #itDepends type thing
lots of times is a #useBoth situation too
You could use Grid for the main <form> and if inline elements were not enough for the design and you need you can flex them to justify how you need or simply use grid alignment on them.
I will say if you are going to change the flex direction just for vertical use... use grid xD
Watch Kevins recent videos about flex/grid too.
Its never either or its how do I need my children to behave and where do I want the concerns for responsiveness (on the children or parent)
Grid children will want to fill by default i.e.
Flex children will max-content
You can control how either fills but again #itDepends where you want the concerns to be.
Also trying to get past #itDepends is a pigon hole as a developer. Don't live in absolutes live in the situation and embrace it depends xD
Thanks @b1mind . I did watch Kevin's video that one should learn grid before flex. I think he is leaning towards grids first.
I've been pushing him for 2 years now to teach grid first
xD
Cause yes you should learn it first IMO
that does not mean one is better over the other
Flex has patterns its better at
but grid for overall layout yes... Grid is master class
this is extremely important. People get annoyed when senior devs say "it depends", but it's not some "I don't feel like explaining it to you" excuse, it's literally because every situation is different and part of growing as a developer is learning how to pick which solution to use for which situation
And yeah, to re-emphasize what b1 already said, learn grid first, but then pick whichever one is best for the specific situation
Specially as a front end developer where we have lots of situations where our end users and devices are different so really #itDepends even more for CSS/HTML
But yea in development period I think its best to never live in absolute solutions.
"Best practices are a lie"
It was best for someone... or some company does not make it best for everything xD
@Jochem I have no problem using flex for header bar ... But forms are 2 dimensional. Not sure why most CSS frameworks insist on nesting flex boxes
Don't think in one dimention or 2 though
wrong way to think about it
Kevin literally just had a video about this too
and don't look too much at what others are doing either, especially frameworks which were probably designed years ago before grid had awesome support and are now dealing with the technical debt
write your own code based on current support and what works best for the current situation
Kevin Powell
YouTube
Stop the Flexbox for 1D, Grid for 2D layout nonsense
Flexbox is great at some 2D layouts, and Grid can be a better choice for 1D layouts as well, so let's stop that being how we decide which one we're going to use, because often it leads us down the wrong path.
š Links
ā
Code from first example: https://codepen.io/kevinpowell/pen/abgomQP
ā
Code from second example: https://codepen.io/kevinpowell...
NONSENSE!!!
if that's nested flex containers, it's nested flex containers. If it's grid, it's grid.
Its more important to understand the parent > child relationship
and how control over the elements is handled
flex wrap is killer š (a pattern only it does well for how it behaves)
Might just want a repeat(auto-fit) though
and Grid works better than wrap cause you need the layout to be controlled by grid templates.
A form can just be block elements and inline elments too
xD
You don't even need grid or flex in lots of situations
#itDepends xD
With grids I see other potential issues: say you have a <label> inside a grid form. In order to make precise layout, I need to make the label sub grid. So it depends on the parent form bring a grid. I do not have such a thing with flex - a child nested flex does not need to know of its parent, it is more autonomous.
don't over think it so much
label is a inline element
also depends if you are nesting inputs in the label
or if you are linking them with id=""
build it and play around
decide on the first before doing the rest of them and find a pattern that fits the designs best
maybe you don't use the same thing for all 10
again without a design to look at its hard to say
cause it very much depends how the design and html structure is š
Thank you @b1mind . I watched again the Kevin's video you posted. I think I will take my chances with grid first for my forms... And yes, if I do not nest inputs in labels, I probably don't need subgid
Good luck! Also remember nesting grids and flexboxes is teh way. Nesting all the things as you need.
mix match and do what you need its why we have the display property
you can also
grid-template: inherit; š:plus1:
hot tip if you didn't need subgrid but still wanted to have the same template as the parent grid. (which is how I do named lined layouts now for my columns a lot)
.. thanks ... Was not aware of grid-template: inherited: