CSS Grid: Part 1 - grid-template

Rabe Datta — Sat, 15 Oct 2022 02:29:34 +0000

We have six divs that display numbers from 1 to 6:

   <body>
        <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </body>

Preview of the code:

without any grid

To turn the container into a grid, we first apply the display: grid property to the container class:

 .container {
    display: grid;
  }

grid-template-columns

In order to specify the columns, we give the container grid-template-columns. grid-template-columns property allow us to define how many columns we will have in our grid and how wide each column will be.

.container {
   display: grid;
   grid-template-columns: 100px auto 100px;
 }

The auto keyword in this case means that the columns will take up whatever remaining space there is in the width.
Preview of the code:

grid-template-rows

The grid-template-rows property allows us to define the height of each row:

 .container {
     display: grid;
     grid-template-columns: 100px auto 100px;
     grid-template-rows: 50px 200px;
   }

Preview of the code:

3 columns(top to bottom) and two rows (left to right)

grid-gap or gap

To set the gap between rows and columns, we can use the grid-gap or gap property:

 .container {
    display: grid;
    grid-template-columns: 100px auto 100px;
    grid-template-rows: 50px 50px;
    grid-gap: 3px;
  }

If we want our grid to be two columns wide and three rows long, we can remove the third column and add an additional row:

.container {
   display: grid;
   grid-template-columns: 100px auto;
   grid-template-rows: 50px 50px 200px;
   grid-gap: 3px;
 }

Preview of the code:

3 rows and 2 columns

var vs let & const.

Rabe Datta — Sun, 16 Jan 2022 07:05:36 +0000

Redeclaration of variable

You can redeclare a variable with var, but not with let and const:

var foo = 34;
var foo = 46;

foo; // 46

However, if we try to redeclare a variable with const and let, we will get a syntax error:

var foo = 34; 
let  foo =46;

foo;  
// SyntaxError: Identifier 'foo' has already been declared.

Global scope & function scope vs block scope

var only has knowledge of global scope and function scope. This means that if you declare a var variable inside an if statement, you can still access it from outside of that if statement. However, you can't do the same with let and const. For example:

var name = "Max"; 

if(name === 'Max'){
  var hobbies = ['Sports', 'Cooking']; 
  console.log(hobbies)  // [ 'Sports', 'Cooking' ]
}

console.log(name, hobbies)  
// 'Max' [ 'Sports', 'Cooking' ]

Notice that you can still access hobbies from outside of the if block. But in the case of let and const, we can't do that since both let and const are block-scoped.

var name = "Max"; 

if(name === 'Max'){
  let hobbies = ['Sports', 'Cooking']; 
  console.log(hobbies)  // [ 'Sports', 'Cooking' ]
}


console.log(name, hobbies) 
// ReferenceError: hobbies is not defined

As you can see, we get a ReferenceError. let and const only care about curly braces (except for curly braces of an object). You can't access a variable defined inside a child block from outside. Also, you can't access a variable that you defined inside a nested block.


var name = "Max"; 

if(name){
  {
    let test = 34;
  }

console.log(test)  
// ReferenceError: test is not defined
}

Hoisting: var vs let & cost

When it comes to var, JavaScript initializes the hoisted variable as undefined:

console.log(name); //'undefined'

var name = "Rob"

When it comes to let and const, the declarations remain uninitialized:

console.log(name);        // ReferenceError: 

//Cannot access 'name' before initialization

var name = "Rob"

DEV Community: Rabe Datta

CSS Grid: Part 1 - grid-template

grid-template-columns

grid-template-rows

grid-gap or gap

var vs let & const.

Redeclaration of variable

Global scope & function scope vs block scope

Hoisting: var vs let & cost