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 works or feel that grid supersedes flexbox — it’s just that darn useful. Rachel puts is very well:
Asking whether your design should use Grid or Flexbox is a bit like asking if your design should use font-size or color. You should probably use both, as required. And, no-one is going to come to chase you if you use the wrong one.
Yes, they can both lay out some boxes, but they are different in nature and are designed for different use cases. Wrapping un-even length elements is a big one, but Rachel goes into a bunch of different use cases in this 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:
Explicit: you define a grid and place items exactly where you want them to go.
Implicit: you define a grid and let items fall into it as they can.
Una Kravets shows how to make layouts in CSS Grid with flexbox fallbacks for browsers that don’t support those grid properties just yet. Una writes:
CSS grid is AMAZING! However, if you need to support users of IE11 and below, or Edge 15 and below, grid won’t really work as you expect…This site is a solution for you so you can start to progressively enhance without fear!
The site is a provides examples using common layouts and component patterns, including code snippets. For example:
See the Pen Grid To Flex — Example 1 by Una Kravets (@una) on CodePen.
Direct Link to Article — Permalink
The post Grid to Flex appeared first on CSS-Tricks.
If we put four grid items in there, here’s what it looks like when inspecting it in Firefox DevTools:
Now let’s target one of those grid items and give it a background-color:
The grid item and the element are the same size!
There is a very specific reason for that though. It’s because the default value for justify-items and align-items is stretch. The value of stretch literally stretches the item to fill the grid area.
But there are several reasons why the element might not fill a grid area:
On the grid parent, justify-items or align-items is some non-stretch value.
On the grid element, align-self or justify-self is some non-stretch value.
On the grid element, if height or width is constrained.
I dunno it just feels useful to know that when placing an element in a grid area, that’s just the starting point for layout. It’ll fill the area by default, but it doesn’t have to. It could be smaller or bigger. It could be aligned into any of the corners or centered.
Perhaps the most interesting limitation is that you can’t target the grid area itself. If you want to take advantage of alignment, for example, you’re giving up the promise of filling the entire grid area. So you can’t apply a background and know it will cover that whole grid area anymore. If you need to take advantage of alignment and apply a covering background, you’ll need to leave it to stretch, make the new element display: grid; also, and use that for alignemnt.
Grid areas and the element that occupies them aren’t necessarily the same size. is a post from CSS-Tricks