Latest Update: 14 February 2021

CSS Grid

In this tutorial, we will build 5 layouts (which are 5 tasks) with CSS Grid, and at the end of the tutorial, you will be ready to use CSS Grid in your next projects.

  • Task 1: Pancake Stack

  • Task 2: Simple 12 Columns Grid Layout

  • Task 3.1: Responsive Layout using 12 Columns Grid

  • Task 3.2: Responsive Layout using grid-template-areas

  • Task 4: Responsive Layout Without Media Query

  • Task 5: 12 x 12 Chess Grid

Resources

To follow along, download the sources or access the design here.