CSS Grid introduction

Introduction

CSS Grid is a new layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents. CSS has always been used to lay out our web pages, but it’s never done a very good job of it. First, we used tables, then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (vertical centering, for instance). Unlike Flexbox, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions.

In this moment of it is supported by all modern web browsers, as we can see on caniuse.com. So you can start using grid layout now and use feature detection with @supports so that it’s only applied in supporting browsers. Like with Flexbox, child elements order doesn’t matter with CSS Grid and elements can easily be repositioned depending on the size of the viewport. With this new CSS layout we can make layouts that were impossible to accomplish before, so we will see completely new designs.

Let’s build a simple example

First some HTML

  <div class="wrapper">
 <div class="header">Header</div>
 <div class="content">Content</div>
 <div class="sidebar">Sidebar</div>
 <div class="footer">Footer</div>
 </div>

Now all the magic in CSS

 .wrapper{
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 100px 500px 100px;
  grid-template-areas:
  "header header"
  "content sidebar"
  "footer footer";
 }
.header {
 grid-area: header;
}
.content {
 grid-area: content;
}
.side{
 grid-area: sidebar;
}
.footer {
 grid-area: footer;
}

To show you grid, I added some colors

And for mobile version just change grid to single column

    @media screen and (max-width:600px) {
      .wrapper{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 100px 500px 100px 100px;
          grid-template-areas:
            "header"
            "content"
            "sidebar"
            "footer";
      }

    }

That’s it, have fun playing with CSS grid.