It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
Manuel Matuzovic makes the point that in order to use CSS grid in some fairly simple markup scenarios, we might be tempted to flatten our HTML to make sure all the elements we need to can participate on the grid. What we need is subgrid and non-buggy display: contents;, so I'd like to think in a year or so we'll be past this.… Read article
We felt spoiled with CSS grid for a minute there. It arrived hot and fast in all the major browsers all at once. Now that we're seeing a lot more usage, we're seeing people want more from grid.
Michelle Barker lists hers wants (and I'll put my commentary after):
If you work on web applications that support older browsers, and have lusted after CSS Grid from the sidelines like I have, I have some good news: I've discovered a clever CSS-only way to use grid auto-placement in IE10+!
Now, it's not actually CSS Grid, but without looking at the code itself, you wouldn't be able to tell. The HTML structure looks like CSS Grid. It has a defined set of columns with an undefined amount of rows and it … Read article
Let's go rapid fire and try to answer this question with quick points rather than long explanations. There are a lot of similarities between flexbox and grid, starting with the fact that they are used for layout and much more powerful than any layout technique that came before them. They can stretch and shrink, they can center things, they can re-order things, they can align things... There are plenty of layout situations in which you could use either one … Read article
I’m a huge fan of CSS Grid and I use it on pretty much every project these days. However, there’s one part of it that makes things much more complicated than they really ought to be: the lack of subgrids. And in this post on the matter, Ken Bellows explains why they’d be so gosh darn useful:
… Read articleBut one thing still missing from the Level 1 spec is the ability to create a subgrid, a grid-item with its own grid
Don't miss this video by Heydon that digs into CSS layouts. It's great how he combines fundamental knowledge, like the way elements flow, wrap, and can have margin with new layout methods like flexbox and grid (with specific examples). Of particular note is the clear demonstration of how flexbox and grid help avoid the need to constantly intervene with media queries in order to affect responsive layouts.… Read article
I remember when I first started to work with flexbox that the world looked like flexible boxes to me. It's not that I forgot how floats, inline-block, or any other layout mechanisms work, I just found myself reaching for flexbox by default.
Now that grid is here and I find myself working on projects where I can use it freely, I find myself reaching for grid by default for the most part. But it's not that I forgot how flexbox … Read article
Within a grid container, there are grid cells. Any cell positioned and sized using the
grid-template-*properties forms part of the explicit grid. Any grid cell that is not positioned/sized using this property forms part of the implicit grid instead.
Understanding explicit grids and implicit grids is powerful. This is my quicky take:
Say you have a very simple CSS grid layout with one column fixed at 300px and another taking up the rest of the space at 1fr.
.grid {
display: grid;
grid-template-columns: 1fr 300px;
}That's somewhat robust. That 1fr column will take up any remaining space left behind by the fixed 300px column. It's true that the auto value would do the same, but auto isn't quite as robust since it's size is based on the content inside. So, … Read article
Dave and I had Jen Simmons on ShopTalk the other day. Jen was talking about Intrinsic Web Design and how one of the core tenets of it is grids with rows and columns that don't necessarily change at the same rate or ones that have essentially different rules for how they behave.
For example, take this (contrived) grid setup:
.grid {
display: grid;
grid-template-columns: 1fr minmax(50px, 100px) 20% auto;
}Each of those columns will behave differently.… Read article