grid column/row methods
Hey, is it better to define the size of grid columns/rows by setting either a
min-width or min-height (depending on which one), on the parent and using the fr unit, or to define them using set sizes such as 10rem for example? Thanks in advance.41 Replies
if you're using a grid, let the grid do the resizing
So it’s best to use fr units?
REM is not a magic responsive unit only use it when you know you want it to change with a users font size
i didn't say that
#depends xD
that's a very specific thing
wihch may or may not be what you want
if you want everything to be the same width or same number of "stops",
fr is the easiest
but nothing stops you from using percent, pixels, cm, inches, viewport sizes...Ah so as b1 says, it’s dependent on what you’re trying to do?
always does
Yea if you want a general "rule" its let your content determine size. minmax* or min- works in this regard but again #depends.
Ah got it, thank you both
I've been using ch for a max-width for say a "content" area
Yeah that makes sense
Seems to work well without scaling out of control like REM can.
it is pretty cool
it uses the size of the character
0 for the current font and font-size, to determine it's valueYeah that is pretty dope
it is
but i can see it being really useful, specially to contain titles from growing out of control, depending on the layout
just to follow up now i'm on my pc and can get the picture, this layout is what i was basing my question on. i've mapped out the possible grid columns and rows, in this case it's the rows i'm most concerned about. i was wondering in a case like this whether it'd be best to set a min-height on the parent or define the rows with another unit, or as you say, let the content decide the height.
ew web 3.0
Web 3.0 is Solid Protocol
web3 is scammy shit >.>;;
isn't that web3?
no
oh, sorry then
its the next version of web
Idk what they are doing but just stating
i mixed both
Also I'd do it like this
Not as one grid but grids/flexes inside grid
i would do the same
and then a sub-grid in the 2nd square
the big space
it could use grid areas for layouting
yea grid area/grid line names are ❤️
and makes things stupid easy
making stuff responsive becomes a "move the name where you want the element to be"
Kevin Powell
YouTube
A new approach to container and wrapper classes
The wrapper or container is probably the most common design pattern around, but after coming across an article by Stephanie Eckles looking at how we can use a grid to emulate a container, and have simple breakouts — https://smolcss.dev/#smol-breakout-grid — I had an idea of how we could do this to completely drop the idea of containers, and then...
I pointed Kevin to the article for this, its my new fav "wrapper"
is that a better way of doing it or is it more preference?
its always preference xD
true haha
I think its better but others might not agree
what pros does that method have that the other doesn't in your opinion?
You can use sub-grid or inherit too you have lots of power over layout this way imo
ah makes sense
Also clean naming for where it lives
You don't need to use viewport units 🤢 to break out of "content" sections. Or be limited to the main wrapper max-width.
The other way is to not have a parent wrapper but a utility class(es) that give the minmax/center of each section.
Yeah I do like the grid wrapper
then learn this way for sure.