Sign up to save your podcasts
Or
Share 3 Unintuitive CSS Layout “Solutions”
Share to email
Share to Facebook
Share to X
Share to email
Share to Facebook
Share to X
Or
3 Unintuitive CSS Layout “Solutions”
Here are a few of my least favorite, easy to forget, unintuitive CSS layout "solutions":
.wat {
min-height: 0;
min-width: 0;
flex-shrink: 0;
}
Height 0? Wat? Shrink 0? Wat? Theo thinks he likes it. But…
Then there's minmax(min(), 1fr)? Wat?
.uhhhhhh {
grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr))
}
Functional programming much?…
Remove intrinsic minimal sizing
#
The minimum width of grid and flex children is auto. Setting it explicitly to 0 removes the intrinsic size, unlocking various things.
.example-1 {
min-height: 0;
min-width: 0;
}
Study more about it on CSS Tricks by Chris Coyier or from Theo over on YouTube.
Don't squish me
#
Often I'll make a flex layout where 1 child should be "pushy" or a dominant space consumer. Works great until a sibling to the pusher goes oval at small viewports, even though a firm height and width are set.
The fix:
Don't squish me, my flex-shrink is 0... which indicates false? which means I don't want to shrink? I am unshrinkable. I have no shrinkability.
.example-2 {
flex-shrink: 0;
}
So intuitive. Not.
Intrinsically responsive grid columns
#
So I don't have this full, triple nested function memorized. I can remember "repeat, auto-fit, minmax" as like the summary of the trick. Which gets me this far:
.example-3 {
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr))
}
But that's not the full snippet I end up using in production. It works great until it's a single column of 10rem minimum width boxes. At which point, they dont go smaller, and so they can cause horizontal overflow in a parent container that's smaller than 10rem.
The fix:
add min(10rem, 100%) in place of 10rem.
.example-3 {
grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr))
}
It's extra to write, but it unlocks the "intrinsically responsive grid layout", which behaves as I was hoping all along.
Study more in this post from Evan Minto:
When the container is smaller than 10rem, the minimum value in our minmax() expression is set to the full width of the container, giving us a nice single-column view with no overflow. When the container is larger than 10rem, the minimum value is set to 10rem, so we get a responsive grid with equal tracks of at least 10rem each.
View all episodes
By Here are a few of my least favorite, easy to forget, unintuitive CSS layout "solutions":
.wat {
min-height: 0;
min-width: 0;
flex-shrink: 0;
}
Height 0? Wat? Shrink 0? Wat? Theo thinks he likes it. But…
Then there's minmax(min(), 1fr)? Wat?
.uhhhhhh {
grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr))
}
Functional programming much?…
Remove intrinsic minimal sizing
#
The minimum width of grid and flex children is auto. Setting it explicitly to 0 removes the intrinsic size, unlocking various things.
.example-1 {
min-height: 0;
min-width: 0;
}
Study more about it on CSS Tricks by Chris Coyier or from Theo over on YouTube.
Don't squish me
#
Often I'll make a flex layout where 1 child should be "pushy" or a dominant space consumer. Works great until a sibling to the pusher goes oval at small viewports, even though a firm height and width are set.
The fix:
Don't squish me, my flex-shrink is 0... which indicates false? which means I don't want to shrink? I am unshrinkable. I have no shrinkability.
.example-2 {
flex-shrink: 0;
}
So intuitive. Not.
Intrinsically responsive grid columns
#
So I don't have this full, triple nested function memorized. I can remember "repeat, auto-fit, minmax" as like the summary of the trick. Which gets me this far:
.example-3 {
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr))
}
But that's not the full snippet I end up using in production. It works great until it's a single column of 10rem minimum width boxes. At which point, they dont go smaller, and so they can cause horizontal overflow in a parent container that's smaller than 10rem.
The fix:
add min(10rem, 100%) in place of 10rem.
.example-3 {
grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr))
}
It's extra to write, but it unlocks the "intrinsically responsive grid layout", which behaves as I was hoping all along.
Study more in this post from Evan Minto:
When the container is smaller than 10rem, the minimum value in our minmax() expression is set to the full width of the container, giving us a nice single-column view with no overflow. When the container is larger than 10rem, the minimum value is set to 10rem, so we get a responsive grid with equal tracks of at least 10rem each.