DEV Community

loading...
Cover image for Acing CSS Grid Model in 2021 with 5 Exercises || CSS 2021 
πŸ”₯

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

joyshaheb profile image Joy Shaheb ・Updated on ・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 :

Credits :

Inspired from Thu Nghiem Check here

Conclusion

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

Alt Text

Suggestions & Criticisms are Highly Appreciated ❀️️

Discussion (3)

pic
Editor guide
Collapse
azzcatdesign profile image
Catherine Azzarello

If you prefer to work mobile-first, change mixin's max-width to min-width:

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

    //  defining min-width
    @if ($screen == $key) {
      @media (min-width : $value) { @content };
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
freeasinbeer profile image
Ross A. Smith

In the Level 5 section, "For Mobile Screen" block the grid-template-areas rule should have the line with all Cs come after the last line of Ds to properly create the layout you've shown in the image.

Collapse
joyshaheb profile image
Joy Shaheb Author

I didn't notice that flaw. Thank you soo much for the feedback. Have a nice day & happy coding β€οΈπŸ˜„