Acing CSS Grid Model in 2021 with 5 Exercises || CSS 2021 🔥
Tags: tutorial, beginners, webdev, css
Published: 2020-12-22 14:03:27

Here's a practical guide to learn the CSS Grid System/Model with **High Efficiency** in 2021 by Building 5 Responsive Layouts across all screen sizes. 


###[**Check The Figma Design Here**](https://www.figma.com/file/OQLU5rBvgCpkR443VmoMGz/CSS-Grid-Model-Dev.to?node-id=0%3A1)


##Table of Contents --
   * [Level-1](#level-1)
   * [Level-2](#level-2)
   * [Level-3](#level-3)
   * [Level-4](#level-4)
   * [Level-5](#level-5)
   * [Conclusion](#level-6)


# Youtube 


####**[If this is difficult for you then see Step by step Tutorial on Youtube 🔥](https://youtu.be/OtpDP8k-2iM)**
{% youtube OtpDP8k-2iM %}


#Setup 🔥

Open [Codepen](codepen.io) / any code editor and place these 👇

###SCSS 

```SCSS 
// Defining Break-Points

$bp : (
  mobile  : 480px,
  tablet  : 768px,
  desktop : 1440px,
);

//Defining our Conditional Media query Mixins.
//To save Time & Coffee.

@mixin query($screen){
  @each $key,$value in $bp{

    //  defining max-width

    @if ($screen == $key) {
      @media (max-width : $value){@content};
    }
  }
}


```

Again .......

```SCSS
//Changing The Default Settings..

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  body{
    font-family: sans-serif;
    font-size:30px;
  }
}

//Defining settings of all .box- classes with
//Border color & placing text at Center.

[class ^="box-"]{
  display: grid;
  place-items: center;

//Set any color you wish for testing purposes.
  border : 3px solid red;
}

```

### We're All Set Boys 😆👌


# Level-1 <a name="level-1"></a>

A beginner Friendly Level XD

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7uakossj8mqxenek5fx4.png)


###HTML 

```HTML

<div class="container">
  <div class="box-1">Header</div>
  <div class="box-2">Main</div>
  <div class="box-3">Footer</div>
</div>

```


###SCSS

```SCSS
.container{
  display: grid;
  height: 100vh;

// The Main Sauce. It means, define --
// [.box-1 auto] [.box-2 1fr unit] & [.box-3 auto]

  grid-template-rows: auto 1fr auto;

//Defining gap between rows.
  grid-gap: 10px;
}


```



# level-2 <a name="level-2"></a>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ipy4mkgt21gtpcwlxlvy.png)

###HTML

```HTML
<div class="container">
  <div class="box-1">Left</div>
  <div class="box-2">Right</div>
</div>

```

###SCSS
### For Large Screen 

```SCSS

.container{
  display: grid;
  height: 100vh;

// Dividing the Width of screen
// in 12 equal fractions.

  grid-template-columns: repeat(12,1fr);
  grid-gap: 10px;
}

```

There's confusion in picking number of columns to cover with grid-columns. No need to panic. Just add 1. For this case, we want .box-1 to cover 4 columns. so, we write 1/5. Like this 👇

```SCSS
.box-1{

// Cover 4 columns. 
//So, start = 1 || end = 4+1 = 5;
// grid-column : start/end; 👈 Short-Hand

  grid-column: 1/5;
}

.box-2{

// Cover remaining columns. 
//This value 👇 is taken from .box-1 ☝️
//So, start = 5 || end = 12+1 = 13;
// grid-column : start/end; 👈 Short-Hand

  grid-column: 5/13;
}

```

### For Mobile Screen 

```SCSS
// The Media query mixin we defined at start.
//Took (mobile) 👇 from $bp;
@include query(mobile){
  .container{

// Defining that, make the column 1 piece/100%;
    grid-template-columns : 100%; //or, write 1fr

//Defining that, make 2 rows, 1fr (fraction) each,
    grid-template-rows : repeat(2,1fr);
  }

// To remove the previously defined values 
  .box-1,.box-2{
//inherit defines the original value.
    grid-column: inherit;
  }
  
}


```



# Let's Change the Game with Grid-template areas 😎
Life's Quite Easier With Grid-Template-Areas tbh. It allows us to see visually what we're doing. 

# Level-3 <a name="level-3"></a>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/y1wpthpx3z2p8c327z3f.png)

###HTML

```HTML
<div class="container">
  <div class="box-1">A</div>
  <div class="box-2">B</div>
  <div class="box-3">C</div>
</div>

```
###SCSS

### For Larger Screen 

```SCSS

.container{
  display: grid;
  height: 100vh;

// Creating a 12 column X 3 row grid 👇

// Defining that 'a' takes 12 columns & 1 row ||'b' takes 8 columns, 2rows || 'c' takes 4 columns, 2rows,
// There is a high chance to get lost here,
// so, divide the areas in 3 columns with blank spaces 👇

  grid-template-areas:
    "a a a a    a a a a    a a a a"
    "b b b b    b b b b    c c c c"
    "b b b b    b b b b    c c c c";
  grid-gap: 10px;
}

.box-1{
  grid-area: a;
}
.box-2{
  grid-area: b;
}
.box-3{
  grid-area: c;
}

```

### For Mobile Screen 

```SCSS
@include query(mobile){
  .container{
  grid-template-areas:

    "a a a a    a a a a    a a a a"
    "a a a a    a a a a    a a a a"

    "b b b b    b b b b    b b b b"
    "b b b b    b b b b    b b b b"
    "b b b b    b b b b    b b b b"
    "b b b b    b b b b    b b b b"

    "c c c c    c c c c    c c c c";
  }
}

```


# Level-4 <a name="level-4"></a>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xsbgskef01vaqtg75hep.png)

###HTML

```HTML
<div class="container">
  <div class="box-1">A</div>
  <div class="box-2">B</div>
  <div class="box-3">C</div>
  <div class="box-4">D</div>
  <div class="box-5">E</div>
</div>

```

###SCSS

###For Larger Screens 

```SCSS
.container{
  display: grid;
  height: 100vh;
  grid-template-areas: 
    "a a a a    a a a a    a a a a"

    "b b b b    b b b b    e e e e"
    "b b b b    b b b b    e e e e"

    "c c c c    d d d d    e e e e";

  grid-gap: 20px;
}

.box-1{
  grid-area: a;
}
.box-2{
  grid-area: b;
}
.box-3{
  grid-area: c;
}
.box-4{
  grid-area: d;
}
.box-5{
  grid-area: e;
}

```

###For Mobile Screens : 


```SCSS
@include query(mobile){
  .container{
      grid-template-areas: 

    "a a a a    a a a a    a a a a"

    "b b b b    b b b b    b b b b"
    "b b b b    b b b b    b b b b"

    "c c c c    c c d d    d d d d"
    "e e e e    e e e e    e e e e";
  }
}

```



# Are You winning Son? Let's Turn Up the heat 🥵

# Level-5 <a name="level-5"></a>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lio9zp1fuvq4kj35cn5x.png)

###HTML

```HTML
<div class="container">
  <div class="box-1">A</div>
  <div class="box-2">B</div>
  <div class="box-3">C</div>
  <div class="box-4">D</div>
  <div class="box-5">E</div>
  <div class="box-6">F</div>
</div>

```

###SCSS

###For Desktop

```SCSS

.container{
  display: grid;
  height: 100vh;
  grid-gap:10px;
  grid-template-areas: 
    "a a a a   a a a a   a a a a"
    "c c b b   b b b b   b b e e"
    "c c d d   d d d d   d d e e"
    "c c d d   d d d d   d d e e"
    "c c d d   d d d d   d d e e"
    "f f f f   f f f f   f f f f";
}

.box-1{
  grid-area: a;
}
.box-2{
  grid-area: b;
}
.box-3{
  grid-area: c;
}
.box-4{
  grid-area: d;
}
.box-5{
  grid-area: e;
}
.box-6{
  grid-area: f;
}

```

###For Tablet

```SCSS

@include query(tablet){
  .container{
      grid-template-areas: 
    "a a a a   a a a a   a a a a"
    "b b b b   b b b b   b b b b "
    "c c d d   d d d d   d d d d"
    "c c d d   d d d d   d d d d"
    "c c d d   d d d d   d d d d"
    "e e f f   f f f f   f f f f";
  }
}

```

###For Mobile Screen

```SCSS

@include query(mobile){
  .container{
  grid-template-areas: 
    "a a a a   a a a a   a a a a"
    "b b b b   b b b b   b b b b "
    "d d d d   d d d d   d d d d"
    "d d d d   d d d d   d d d d"
    "d d d d   d d d d   d d d d"
    "c c c c   c c c c   c c c c"
    "e e e e   e e e e   e e e e"
    "f f f f   f f f f   f f f f";
  }
}
```

## Read Next : 

{% link https://dev.to/joyshaheb/flexbox-cheat-sheets-in-2021-css-2021-3edl %}

## Credits :

[Inspired from Thu Nghiem Check here](https://www.freecodecamp.org/news/learn-css-grid-by-building-5-layouts/)


# Conclusion <a name="level-6"></a>

Here's your medal 🎖️ for successfully completing CSS Grid Model/System. ❤️

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yx020xpcqeh1wg30wc5c.png)

###**Suggestions & Criticisms are Highly Appreciated ❤️️**


   * **Youtube[ / Joy Shaheb](youtube.com/channel/UCHG7IJuST_BXJkne-0u0Xtw)**

   * **Twitter[ / JoyShaheb](https://twitter.com/JoyShaheb)**

   * **Instagram[ / JoyShaheb](https://www.instagram.com/joyshaheb/)**