CSS Grid Layout is an improvement in css that is yet drafted for launch. But preparing for the future is what we do, Right? So let's learn about grid layout.

First of all, I admit that when I first heard about it, I thought of it like a some kind of bootstrap grid layout. But it's not! Its a builtin CSS feature like flex.

Grid layout works like rows and columns in table. It has been a standard methodology for years to build HTML page layouts. CSS Grid layout takes it to another level making it easier, efficient, flexible and much much much more powerful. Lets get started and learn it step by step with examples.


Terminology

Property Description
fr It is a unit and should be used with grid-rows and grid-columns. It distributes free space into equal columns.
vh Viewport Height. Its a new unit introduced for grid layout. Also used with grid-rows and grid-columns.
cell Cells are what builds up a grid. It's just the same as a cell in a table.
track In a simpler terms, It is the same as a column in a table.
area Areas are equivivelent to rows in a table.
lines Lines defines horizontal and vertical boundaries of other elements.

Ok now that we know some terms, It'll be much easier to wrap our heads around the markups and styles.


Anatomy Of Grid

Grid is pretty much same as tables but with different terms and properties. And these properties makes it flexible and powerful.

CSS Grid Anatomy - Basic Terms

I don't have anything to say about it. Instead, I'd rather show it to you with example. Let's move on.


First Minimal Example

I believe there is no better way to learn than with example. And we're going to do the same here. I've setup a basic example with minimum options. And then we'll add up more properties to it to learn more.

This is an example I'm going to be using for the rest of this article.

Basic example css grid preview

HTML

	<div class="example-grid">
	    <div class="example-item1 item">First Item</div>
	    <div class="example-item2 item">Second Item</div>
	    <div class="example-item3 item">Third Item</div>
	</div>

CSS

    .example-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 100vh;
    }

    .item {
        padding: 20px;
        text-align: center;
        color: #fff;
    }

    .example-item1 {background: #FFAE5D;}
    .example-item2 {background: #FF7A5A;}
    .example-item3 {background: #9F6164;}

Reference

Pay attention to the noteworthy example-grid class. It has all essential properties to get started. Notice how 1fr and 100vh is used. Change the value of it in reference link to learn how it works. Basically 1fr means one fragment of the available space. Since width of the empty space is going to be dynamic, It will be calculated by equaly dividing space between total number of columns. I think you'll understand it better by experimenting in reference link.


Moving On! Let's dive deep.

Let's say we want a page with sidebar and as contents, We want four vertical sections. All we have to do is change grid-template-columns and grid-template-rows. Even though I mentioned to dive deep, Its still easy to do. In fact once you learn all the parts, Its all a piece of cake!

	<div class="example-grid">
	    <div class="example-item1 item">Side Bar</div>
	    <div class="content">
	        <div class="example-item2 item">First Item</div>
	        <div class="example-item3 item">Second Item</div>
	        <div class="example-item4 item">Third Item</div>
	        <div class="example-item5 item">Fourth Item</div>
	    </div>
	</div>
	body {
        background-color: #28a1f5;
        margin: 0;
        font-family: Open Sans;
    }

    .example-grid {
        display: grid;
        grid-template-columns: 1fr 3fr;
        grid-template-rows: 100vh;
    }

    .content{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 25vh 25vh 25vh 25vh;
    }

    .item {
        padding: 20px;
        text-align: center;
        color: #fff;
    }

    .example-item1 {
        background: #FFAE5D;
    }

    .example-item2 {
        background: #FF7A5A;
    }

    .example-item3 {
        background: #9F6164;
    }

    .example-item4 {
        background: #8a4447;
    }

    .example-item5 {
        background: #5a2a2c;
    }

Reference

Checkout the way I put a grid inside a grid just like you would do normally with divs. What I've done is,

  1. Defined two columns for outer grid.
  2. Put another grid inside second columns.
  3. Defined one column and four rows inside inner grid.

Thats it! Easy peasy right?


Positioning Elements in a Grid Layout

Since we understand how basic grid works now, Let's see how we can position elements in grid.

Is't this what we did so far???

Well... Yes but unlike grid in bootstrap, We can actually move an element around in the grid using only css. Yes! you heard me right!! I said using just css! :D

Don't worry if you are not familiar with bootstrap or have't heard of it. I'll write another post to introduce you to it.

Let me show you how to position element in a grid. It's very simple. All you have to do is count the line numbers. Take a look at below image.

CSS Grid Positioning Basics

Let me explain.

As you can see I've numbered the lines horizontally and vertically. And here is a tip for you; Always remember that the first line starts at the beginning of the grid (Observe line numbers in the picture).

In the picture, The block at it's initial level is in the first cell. To move it to the center of the grid, We'll have to specify that cell's location by using line numbers.

Element's initial location starts from 1st line to 2nd line horizontally and 1st line to 2nd line vertically. And we want to move it the center. Hence, Column should start from 2nd line to 3rd line horizontally and 2nd line to 3rd line vertically.

See? Was that so hard?

Reference


Let's learn some more properties

If you know how to define grid and how to move elements around, You already got most of all. But I didn't call it "Powerful" for nothing. Let me show you some more properties that makes it "Powerful". Some properties are for "containers" and some are for grid item specific.

I have categorized them as below.

  • Grid Container

    • display
    • grid
    • grid-gap
    • grid-row-gap
    • grid-column-gap
    • grid-template-areas
    • grid-template-rows
    • grid-template-columns
    • justify-items
    • align-items
    • justify-content
    • align-content
    • grid-auto-flow
    • grid-auto-rows
    • grid-auto-columns
  • Grid Element

    • grid-row
    • grid-column
    • grid-row-start
    • grid-row-end
    • grid-column-start
    • grid-column-end
    • align-self
    • grid-area
    • justify-self

All properties are explained here.


Why CSS Grid Layout Instead Of Flex

If you have ever used flex (don't worry if you haven't. Its totally fine!), You already know how flexible and efficient it is and how it makes everything like vertical-align and making columns height even so much simpler and easier.

Even though flex is very powerful all on its own and provides awesome features, Grid has noteworthy advantages over it. The most important one is that you can move element around using just CSS!! I know... I know... But I cant get it out of my head. Its pretty awesome!! Flex and Grid are very different thing but still they both are related to the layout of the page and therefore, They are comparable.

And there is no limitations... You can use both of them together for the sake of a solution to your problems. Obviously I'm not going to stop you!

Talking about the advantages, Grid makes things very easier and maintainable without modifying much of your HTML markup. You can expect it to become a next big thing in the history of CSS because I certainly think so.


Conclusion

Grid is a very powerful feature of CSS. Of course it is not production ready yet but It is totally worthy of learning now. It redefines layout designing and I think it solves most of the layout alignment problems that all the front end developers had over these years.

But even though all of it's advantages, features and super heroic powers, It will take some time to be adapted by the developers because of the backward compatibility with older browsers.

I hope this article was helpful and If you have any suggestions, Please comment below.

I'm kind of new to blogging so please go easy on me if there is any mistakes or missing puzzle that I left out. :) Stay tuned for more posts.