CodeNewbie Community 🌱

JoyShaheb
JoyShaheb

Posted on • Originally published at dev.to

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

#tutorial #codenewbie #fundamentals #webdev

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 :

joyshaheb image

FlexBox Cheat Sheets in 2021 || CSS 2021

JoyShaheb ・ Jan 14 ・ 3 min read

#codenewbie #fundamentals #beginners #tutorial

Conclusion

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

Suggestions & Criticisms Are Highly Appreciated ❀️

Alt Text

Alt Text

Top comments (3)

Collapse
 
lastreaction profile image
lastreaction •

Yes exercise is very important and if you're looking for optimal gym supplements, amino acids should definitely be on your list. They play a crucial role in muscle recovery and growth, especially Branched-Chain Amino Acids (BCAAs) and essential amino acids like L-arginine. I’ve been using a supplement that combines these amino acids, and it has significantly improved my workout performance and recovery time. If you're interested in boosting your gains and overall fitness, you might want to check it out here: amino-alliance.eu/en/
It's been a great addition to my routine!

Collapse
 
lastreaction profile image
lastreaction •

Yes exercise is very important and if you're looking for optimal gym supplements, amino acids should definitely be on your list. They play a crucial role in muscle recovery and growth, especially Branched-Chain Amino Acids (BCAAs) and essential amino acids like L-arginine. I’ve been using a supplement that combines these amino acids, and it has significantly improved my workout performance and recovery time. If you're interested in boosting your gains and overall fitness, you might want to check it out here: https://www.amazon.co.uk/Amino-Alliance-L-Glutamine-L-Arginine-Palatinose/dp/B0BG8YHQYX?ref_=ast_sto_dp&th=1&psc=1

It's been a great addition to my routine!

Collapse
 
manslie3 profile image
manslie3 •

Increasing watch time can positively impact other important video metrics, such as likes, dislikes, and shares. When viewers spend more time watching your content, they are more likely to engage buy youtube watch hours with it through various interactions, boosting overall engagement metrics.

Read next

harshusketch profile image

Help I am unable to run flutter(dart) on my laptop (Windows 10), I have tried everything I could from command prompt to environmental variables but still the code is showing error, I need some guidance

Harshu-sketch -

paras96 profile image

Step-by-Step MLOps Roadmap for Machine Learning Operations Mastery

Paras-96 -

ameema profile image

Top 7 Resources & Websites to learn Coding

Ameema A -

kingsauduni26 profile image

Learning to Code? Here’s How AI Became My Unexpected Coding Mentor!

kingsauduni26 -