CodeNewbie Community

loading...

Master CSS Grid Model in 2021 with 5 Exercises || CSS 2021πŸ”₯

joyshaheb profile image JoyShaheb Originally published at dev.to ・6 min read

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

Table of Contents --

Youtube

If this is difficult for you then see Step by step Tutorial on Youtube πŸ”₯

Setup πŸ”₯

Open Codepen / any code editor and place these πŸ‘‡

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};
    }
  }
}


Enter fullscreen mode Exit fullscreen mode

Again .......

//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;
}

Enter fullscreen mode Exit fullscreen mode

We're All Set Boys πŸ˜†πŸ‘Œ

Level-1

A beginner Friendly Level XD

Alt Text

HTML


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

Enter fullscreen mode Exit fullscreen mode

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;
}


Enter fullscreen mode Exit fullscreen mode

level-2

Alt Text

HTML

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

Enter fullscreen mode Exit fullscreen mode

SCSS

For Large Screen


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

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

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

Enter fullscreen mode Exit fullscreen mode

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 πŸ‘‡

.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;
}

Enter fullscreen mode Exit fullscreen mode

For Mobile Screen

// 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;
  }

}


Enter fullscreen mode Exit fullscreen mode

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

Alt Text

HTML

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

Enter fullscreen mode Exit fullscreen mode

SCSS

For Larger Screen


.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;
}

Enter fullscreen mode Exit fullscreen mode

For Mobile Screen

@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";
  }
}

Enter fullscreen mode Exit fullscreen mode

Level-4

Alt Text

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>

Enter fullscreen mode Exit fullscreen mode

SCSS

For Larger Screens

.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;
}

Enter fullscreen mode Exit fullscreen mode

For Mobile Screens :

@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";
  }
}

Enter fullscreen mode Exit fullscreen mode

Are You winning Son? Let's Turn Up the heat πŸ₯΅

Level-5

Alt Text

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>

Enter fullscreen mode Exit fullscreen mode

SCSS

For Desktop


.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;
}

Enter fullscreen mode Exit fullscreen mode

For Tablet


@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";
  }
}

Enter fullscreen mode Exit fullscreen mode

For Mobile Screen


@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";
  }
}
Enter fullscreen mode Exit fullscreen mode

Read Next :

Conclusion

Here's your medal πŸŽ–οΈ for successfully completing CSS Grid Model/System. ❀️

Suggestions & Criticisms Are Highly Appreciated ❀️

Alt Text

Alt Text

Discussion (0)

pic
Editor guide