Let's use css grid

Css grid, it is a new thing but is it. Let's set up such a system. You can check out awesome examples on grid by example and build something awesome. But i also want to keep in mind some older users for this example. Older users who still use Internet explorer. They are there so why not.

Code

Let us set up some css code. I did not use @supports queries because IE10 can use grid css but dos not know it it supports this.

The next thing is we want to set up some code we build with the autoprefixer so we can build code and render to IE10 and up. So we have to set up the {grid: true} on the autoprefixer. Also when we do this we can only prefix code IE10 gets. I tried to use grid-template-areas. But when i added some media queries IE did not listed. So i ended up with grid-template-columns and grid-template-rows. They do the same, but we have to be able to count to 10 sadly.

Let's go

.grid {
  padding-left: $spacer;
  padding-right: $spacer;
  padding-bottom: 100px;
  max-width: 1140px;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .navbar {
    position: relative;
  }
  .grid {
    padding: 0;
    display: grid;
    grid-template-columns: 300px 10px 1fr;
    grid-template-rows: min-content 10px 1fr 10px min-content;
    height: 100vh;
    max-width: 100%;

    &-sidebar,
    &-header,
    &-content {
      overflow: auto;
    }
    &-sidebar {
      grid-column: 1;
      grid-row: 1/6;
    }
    &-header {
      grid-column: 3;
      grid-row: 1;
    }
    &-content {
      grid-column: 3;
      grid-row: 3;
    }
    &-footer {
      grid-column: 3;
      grid-row: 5;
    }
  }
}

Html

Also set up some html. I also added some bootstap because we like bootstrap! I added the navbar fixed to the bottom and added a helper class on the larger displays.

<div class="grid">
    <div class="grid-sidebar bg-dark">
        <nav class="navbar fixed-bottom navbar-dark navbar-expand-md d-block bg-dark">
            <div class="collapse navbar-collapse py-2" id="sidebar-navigation">
                <ul class="navbar-nav d-block">
                    ...
                </ul>
            </div>
            <button class="navbar-toggler float-right" type="button" data-toggle="collapse" data-target="#sidebar-navigation" aria-controls="sidebar-navigation" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </nav>
    </div>
    <div class="grid-header bg-primary">
        <div class="container-fluid py-2">
            <h1 class="text-light my-0">Grid it!</h1>
        </div>
    </div>
    <div class="grid-content bg-light">
        <div class="container-fluid py-2">
            ...
        </div>
    </div>
    <div class="grid-footer bg-light">
        <div class="container-fluid py-2">
            ...
        </div>
    </div>
</div>

And done!

And we are done, we built a simple grid based layout i would say anyone can see. Unless they are on very old browsers or browsers that just don't support grid. But for them we even have a mobile layout they can see on they (large) screen. So no harm done! Anyone can see our content.

I see what you did there

Now we built a grid system you probably see on this page. It is awesome and you can use this. Get started with it and play around, just keep you users in mind on where to stop or where to play on!

Supports

The example here is to built systems and keep in mind there are older browsers on this world. Add the autoprefixer, add the {grid: true} and test where your code breaks, or keeps working. Newer browsers can do anything.

Also i found a nice article on what to do and check for grid layouts if you should try and use the ie implementation of css grid layout.

Also just check out the series on css-tricks.com. It can help you on your next project.

Now it is your turn to build something awesome!