CSS Grid

Intro

For the first time (since 2017) CSS Grid is available directly in the browser! This means that any way to create layout structures will be disabled by a native system that is cleaner at the time of writing your HTML and CSS, consequently more semantic and considerably easier to learn.

Classic way

Until then, all that existed about browser layout was just an "imitation" of the true functionality of a grid. A widely used template is from the famous Bootstrap framework: <div> with classes: 'row', 'col-some-size', 'col-some-smaller-size', several and many tags defined in HTML and with classes that tend to grow even more according to the complexity of your project.

<div class="navbar navbar-dark bg-dark shadow-sm">
  <div class="container d-flex justify-content-between">
    <a href="#" class="navbar-brand d-flex align-items-center">
      <strong>Title</strong>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</div>

The point is that this "traditional" model has worked very well and you will not be reinventing the wheel by choosing to use CSS Grid in layout construction, on the contrary, with CSS Grid you make your markup simpler and semantically correct (as I said before) and without dirt and divs and more divs defining rows and columns.

CSS Grid Layout

With a few lines of HTML and CSS we set up a responsive grid easily:

Which replaces much larger files compared to the Bootstrap grid for example.

The more I use CSS Grid, the more convinced I am that there is no benefit to be had by adding a layer of abstraction over it. CSS Grid is the layout framework. Baked right into the browser.

— Jen Simmons

CSS Grid ≠ Flexbox

Yes, the two are different and each has its own purpose, but it does not replace the other, they complement each other!

Flexbox

Flexbox aims to organize items within a parent element. For example: I have a footer tag and need to place certain text in the center.

footer {
  display: flex;
  justify-contents: center;
  align-items: center;
}

That is, it is great for working with elements in a single dimension, whether row or column.

You can also create two-dimensional flexbox layout, but that's not its purpose. CSS Grid works a lot better with this.

CSS Grid

With CSS Grid we define, for example, where this footer will be in the whole layout.

#app {
  display: grid;
  grid-template-areas: "header" "main" "footer"
}

footer {
  grid-area: footer;
}

This is the best way to arrange elements in two dimensions, especially when you need to define the structure of a page.

The best of both sides

Using the same basic example to enjoy the best of both together:

#app {
  display: grid;
  grid-template-areas: "header" "main" "footer"
}
  
footer {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-area: footer;
}

Anyway, in this case we define the grid and the position of the footer with CSS Grid and centralize elements that are inside the footer. CSS Grid and flexbox are simple contexts but can confuse when and when to use both.

Some links

https://grid.layoutit.com/

https://cssgrid-generator.netlify.com/