Grid is a very powerful new feature (still in draft) of CSS. In this post, I've provided all the properties of grid with explanation where needed. You can learn it here.

  • 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

Grid Container

Grid container is required to wraps all the grid elements inside. Let's see its properties one by one.


display

Defines grid container which also works as a root for formatting grid elements.

  • subgrid - Tells a nested grid to take the sizes of its columns and grid from it's parents instead of specifying.
  • inline-grid - Defines inline grid
  • grid - Defines block grid

grid

Once you get used to grid, This property comes in very handy. You can use it to specify most of values in one line. Kind of like a shorthand value like the way we use background.

Example: Shorthand

	.grid-container{
		display: grid;
		grid: 100vh / 1fr 1fr 1fr;
	}

Example: Without shorthand

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

Reference


grid-gap

Shorthand for grid-row-gap and grid-column-grid.

Example: Shorthand

	.grid-container{
		display: grid;
		grid: 100vh / 1fr 1fr 1fr;
		grid-gap: 10px 20px;
	}

Example: Without shorthand

	.grid-container{
		display: grid;
		grid: 100vh / 1fr 1fr 1fr;
		grid-row-gap: 10px;
		grid-column-gap: 20px;
	}

grid-row-gap and grid-column-gap

Specifies gap between rows. Its kind of like cellspacing in table but instead of around the cell, It specifies space between rows without affecting columns.

	.grid-container{
		display: grid;
		grid: 100vh / 1fr 1fr 1fr;
		grid-row-gap: 10px;
		grid-column-gap: 20px;
	}

CSS Grid Properties - row-gap and column-gap


grid-template-areas

Defines a template using names specified in grid using named areas (you can name an area using grid-area). The possible values for this property are grid-area-name, ., and none. Lets see how it works with an example.

	.example-grid{
		display: grid;
		grid: 50vh 50vh / 1fr 1fr 1fr;
		grid-template-areas: "example-item1 example-item1 ."
		                   "example-item2 none example-item3";
	}

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

CSS Grid Properties - grid-template-area

Reference


grid-template-rows and grid-template-columns

Defines rows and columns. Specify space separated values to define multiple rows/columns.

	.example-grid{
	  display: grid;
	  /* defines one row */
	  grid-template-rows: 100vh;
	  /* defines three columns */
	  grid-template-columns: 1fr 1fr 1fr;
	}

Reference


justify-items

Specify how you want the grid to justify items it contains.
Possible values for this property are start, end, center, stretch (This is the default).

start

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

CSS Grid Properties - justify items

end

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

CSS Grid Properties - justify items

center

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

CSS Grid Properties - justify items

stretch

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

CSS Grid Properties - justify items

You can also specify alignment for an individual cell using justify-self.

Reference


align-items

This works just same as justify-items but instead of aligning along the column axis, It aligns items along the row axis. In a simpler terms, justify-items aligns items horizontally and align-items aligns items vertically.


justify-content

Ok... Up untill now all the alignments were all about items inside the grid. Now what if there is a grid inside a grid container and it's size is smaller than the container? You're going to need more control for this right? Thats where justify-content comes into the picture. Its kind of like a text-align for grid. There are 7 possible values for this property. Lets see them one by one.

start

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

CSS Grid Properties - justify content

end

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

CSS Grid Properties - justify content

center

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

CSS Grid Properties - justify content

stretch

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

CSS Grid Properties - justify content

space-around

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

CSS Grid Properties - justify content

space-between

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

CSS Grid Properties - justify content

space-evenly

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

CSS Grid Properties - justify content


align-content

This works just same as justify-content but instead of aligning grid along the column axis, It aligns items along the row axis.


grid-auto-flow

Specifies auto-placement algorithm type. Possible values for this property are row, column and dense (I honestly don't know what this one does!).

[html]


First Item

Second Item

Third Item

Fourth Item

Five Item

Sixth Item

Seventh Item


[/html]

	.example-grid{
	  display: grid;
	  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	  grid-template-rows: 50vh 50vh;
	  grid-auto-flow: row;
	}

Reference


grid-auto-rows, grid-auto-columns

Specifies size of the auto generated rows/columns. First of all, what do I mean by auto generated you say? Let me show you by an example first.
Lets I have a grid like shown below.

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

CSS Grid Properties - grid-auto-rows and grid-auto-columns

Ok that is fine. Works like a charm!! But what if you specify the location of those items with grid-row and grid-column like shown below?

	.example-grid{
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  grid-template-rows: 50vh 50vh;
	}
	.example-item1{
	  grid-column: 1/2;
	  grid-row: 1/2;
	}
	.example-item2{
	  grid-column: 4/5;
	  grid-row: 2/3
	}

CSS Grid Properties - grid-auto-rows and grid-auto-columns

See the problem? We specified the location of the item 2 that doesn't even exist. So what grid did is, It created missing columns and rows implicitly. But the size of them is not defined, It is applied automatically. Now what if we want to resize these? Thats where grid-auto-rows and grid-auto-columns comes into the picture. Lets see it by an example.

	.example-grid{
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  grid-template-rows: 50vh 50vh;
	  grid-auto-columns: 1fr;
	}
	.example-item1{
	  grid-column: 1/2;
	  grid-row: 1/2;
	}
	.example-item2{
	  grid-column: 4/5;
	  grid-row: 2/3
	}

CSS Grid Properties - grid-auto-rows and grid-auto-columns

Reference

Grid Element

Everything you put inside grid cell is a grid element. You can specify in which cell the element should be placed or how it should be placed... etc. Lets see some properties that we can apply to these elements.


grid-row-start, grid-row-end, grid-column-start, grid-column-end

You can specify a location to put a grid element to by using grid-row-start, grid-row-end, grid-column-start and grid-column-end.

CSS Grid Positioning Basics

Reference


grid-row, grid-column

These are shorthand for grid-row-start, grid-row-end, grid-column-start and grid-column-end.

	.example-item {
	  padding: 20px;
	  text-align: center;
	  color: #fff;
	  background: #FFAE5D;
	  
	  /* cell location */
	  grid-column: 2/3;
	  grid-row: 2/3;
	}  

Is same as

	.example-item {
	  padding: 20px;
	  text-align: center;
	  color: #fff;
	  background: #FFAE5D;
	  
	  /* cell location */
	  grid-column-start: 2;
	  grid-column-end: 3;
	  grid-row-start: 2;
	  grid-row-end: 3;
	}

align-self

We learned align-items above in this post. But instead of aligning all elements in the grid, This property lets us apply alignment to a specific element in the grid.


grid-area

Gives an element a name that can be referenced by grid-template-areas. You can also specify grid-row-start, grid-row-end, grid-column-start and grid-column-end in it as a shorthand.


justify-self

We learned justify-items above in this post. But instead of applying it to all elements in the grid. This property lets us apply it to specific element in the grid just like align-self. The difference between align-self and justify-self is that align-self aligns element along the row axis where justify-self aligns element along the column axis.