CSS-Grid is your friend

Grid is not new. It was recommended for adoption in 2011. It is without a doubt the most revolutiary thing to hit CSS since flexbox. You have already waited too long to learn it.

Grid is you friend. It wants to make your life easier so you can chill more. It wants your sites to be so pretty and gridy that people will click your ads just to say thanks for the amazing UI.

Grid makes writing CSS and HTML feel way more like programing and way less like churning out websites.
Learning grid will help you:

1. be more confident
2. be ready for whatever madness 2019 brings
3. become a layout demigod
4. understand shoptalk show
5. write respectable code

Think of this as a 'bare-bones' grid tutorial. What is the absolute minimum you can learn about grid and use it to build layouts? This is the approach I take.

As with numerous things in CSS, there are a few ways to declare grid layouts. Instead of exhaustivly running through each and every way, I'll just point you at a few simple straightforward ways.

Grid doesn't replace flexbox. I love flexbox. Grid loves flexbox. They play nicely together and each fill a different role in achieving responsive and spectacular layouts.

I still use flexbox. You'll still use it too. But grid is the fastest and best way to structure an HTML document. Your flexboxes are dying to be dropped into a nice grid where they can thrive.

Let's get this party started shall we?

body{
      display: grid;
    }

Too easy? Gotta start somewhere, eh. Ok, lets go deeper.

body{
      display: grid;
      grid: 1fr / 200px 1fr;
    }

What is exactly going on with this grid property? It always helps to know what you're looking at. This is CSS for the site you're viewing right now!!! Nice twist there, eh? Basically the syntax is saying this: rows / columns.

This page is rocking a two column layout. It achieves this by defining the first column as 200px wide, for the nav bar. Then throwing the rest to the article. Using 1fr specifies the fraction of the remaining space to be delegated to the unit.

The real power of grid is unleashed with the last property I will share with you here.
GRID TEMPLATE AREAS!

body{
      display: grid;
      grid: 1fr / 200px 1fr;
      grid-template-areas: "nav article";
    }

nav{
      grid-area: "nav";
    }

main{
      grid-area: "article";
    }

The grid container's grid-template-areas declaration is in itself a visualization of how the grid will appear. The elements within the container choose where they'll be displayed. This page uses a media query to be a top bar on phones and small screens and a left-side bar on larger displays.

Go build something! When you get stuck find more info here