CSS Grid on Production

Today we have new tools/toys like CSS Grid which allows far greater control than we’ve ever had before, but at the same time, it allows us to let go of our content and allow it to find it’s own natural fit within the constraints of our design.

Personally, I’ve been looking at CSS Grid as a way to force elements to go where I want them to which is certainly one way to look at it, but it also offers a more natural “fit where I can” approach which I’m beginning to explore and having a lot of fun with.

While you’re getting started with CSS Grid you’re sure to be thinking that you can’t use this is production because it’s only supported in the latest browsers. While the support is true it doesn’t preclude you from starting to use it. Every browser that does support CSS Grids also supports @supports. This means that you can do something like this:

.wrapper {
  max-width: 1200px;
  margin: 0 20px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 3fr;
  grid-auto-rows: minmax(150px, auto);
}
/*float the side bar to the left and give it a width, but also tell it the grid column to go in  if Grid is supported */
.sidebar {
  float: left;
  width: 19.1489%;
  grid-column: 1;
  grid-row: 2;
 }
/*float the content to the right and give it a width, but also tell it the grid column to go in  if Grid is supported */
.content {
  float: right;
  width: 79.7872%;   
  grid-column: 2;
  grid-row: 2;
}

This will give you a site that works in all browsers that do not support Grid because it’s ignored and looks at the floats and widths. Then if Grid is supported then we want to remove the widths otherwise the elements will take up that width of the grid track rather than the parent.

@supports (display: grid) {
.wrapper > * {
  width: auto;
  margin: 0;
  }
}

Voila, you have a fallback layout AND grid in one.