When to use neither Grid nor Flexbox?
I'm a frontend newbie. I read how CSS Grid and Flexbox are the future and replace most legacy CSS hacks. So, in which situations should I use neither
display: grid nor display: flex when laying out children items of an element? Or can I just slap one or the other on everything to reduce the amount of fighting with CSS?12 Replies
well, if you have a single column layout, you'll probably don't need either, else it surely helps
Hmm
For example I started to implement this layout yesterday (from icodethis.com) (didnt get very far)
what if i just slapped nested CSS grids on everything like this
(every color is a separate grid; dotted lines indicate where elements span across a grid line)
is that a viable strategy? (very much doesnt feel like it š
)
yea it could be. there is not really a right or wrong here.
damn
there is not really a right or wrong here.I try to go as close as possible to the way the spec designers intended CSS to be used to minimize me fighting against the challenge so I'd love to know how "everyone else" does it it's my experience from every other programming area that staying close to the way a library or framework is meant to be used tends to make things magically work
with CSS, there's usually multiple equally valid ways of solving a problem
take a look at Kevin's most recent video where he goes through the layout challenge solutions, lots of different ways to do the same thing.
Over time, you'll develop favorites and learn pros and cons, but that's not really the kind of knowledge someone can summarize in a post on Discord š
yeah thats how i got onto this server, and where i got the motivation to implement random layouts ^^
okay..
thanks for the answers btw! :)
but for example in kevin's latest video, flexbox would have been the suboptimal way to go about the problem, and doing it anyways entailed fighting against the language (that
margin-left: <magic number> thing, or having to restructure HTML to get white space where you want it)
But I suppose you're saying, knowing which tool is right for the job can only be learned the hard way through experience?I can't give you a hard and fast set of rules that always give you the same answer at least
like Mark said though, there's not that many situations where either flex or grid isn't a good solution
okay
thank you both @Jochem @MarkBoots! š¤
I did this icodethis challenge myself and think I used a combination of grid and flexbox as Iām still not super confident with keeping grid responsive and fitting the content without leftover space