my Web Development Journey
CSS Grid

CSS Grid

Ajay Dewangan's photo
Ajay Dewangan
·

7 min read

Table of contents

CSS Grid

In CSS, grid is a two-dimensional grid-based (row and column based) layout system, which work like flexbox but somewhere its more easy to change anything in webpage using grid instead of flexbox.

Some other figures are given to knowing how grid works -

grid-2.jpg

grid-3.jpg

where grid applied is called grid area, and devide parts by row and column are called grid cell, Top to down is grid track (column), and left to right is grid track (row).

Grid Area grid-11-area.png

Grid Line grid-11-line.png

Grid Cell grid-11-cells.png

Grid Track grid-11-track.png

Grid Properties

Note that we can use fr (Fraction) unit in grid it means it devides size automaticaly to full the remaining space of container, 1fr is equal to containers full size, we can devide it as we want., px, percentage and fr are used in grid. we can merger fr values with other values also, like - 50px 10% 1fr

Properties for Parent (Container)

Without grid

grid-2-nothing.png

  1. display : grid/inline-grid;

when given container - Display : grid; Contents automatically adjust space in height

grid-2-dis-grid.png

.container {
            height: 100vh;
            width: 700px;
            margin : 20px ;
            background-color: wheat;

            display : grid ;
        }

  1. grid-template-_ _ _ :

  2. grid-template-columns : .... .... ;

grid-2-dis-grid-temp-col.png

Column adjusted as I given

.container {
            height: 100vh;
            width: 700px;
            margin : 20px ;
            background-color: wheat;

            display : grid ;
            grid-template-columns: 100px 100px 100px ;
        }
  • grid-template-row : .... .... ;

grid-2-dis-grid-temp-row.png

all sets in row but only 3 row adjusted as I given

.container {
            height: 100vh;
            width: 700px;
            margin : 20px ;
            background-color: wheat;

            display : grid ;
            /* grid-template-columns: 100px 100px 100px ; */
            grid-template-rows: 100px 100px 100px ;
        }

Now see what is doing when both column and row are given same time

grid-2-dis-grid-temp-col.png

.container {
            height: 100vh;
            width: 700px;
            margin : 20px ;
            background-color: wheat;

            display : grid ;
            grid-template-columns: 100px 100px 100px ;
            grid-template-rows: 100px 100px 100px ;
        }

Now we can see when change values of both column and rows then how it wokrs first see values in code what i change

.container {
            height: 100vh;
            width: 700px;
            margin : 20px ;
            background-color: wheat;

            display : grid ;
            grid-template-columns: 200px 100px 200px 100px ;
            grid-template-rows:  80px 200px 80px ;
        }

Output here with changed values

grid-2-dis-grid-temp-both-val-change.png

Note - we can use px value but we have 'fr' (fraction) value that are more easy to devide

We use repeat( ) for fraction value, syntax - repeat (how-much-col/row , fraction-value)

now we use repeat () in our code that is shown-

.container {
            height: 100vh;
            width: 700px;
            margin : 20px ;
            background-color: wheat;

            display : grid ;
            grid-template-columns: repeat(3, 1fr) ;
            /* grid-template-rows:  80px 200px 80px ; */
        }

see in image how it devides perfectly-

grid-2-dis-grid-temp-both-repeat.png

We are working with a size of items, right . When we not given width or height then see how it works first show code 

.container {
            height: 100vh;
            width: 700px;
            margin : 20px ;
            background-color: wheat;

            display : grid ;
            grid-template-columns: repeat(3, 1fr) ;
            /* grid-template-rows:  80px 200px 80px ; */
        }
        .all {
            /* height: 40px;
            width: 50px; */
            margin : 5px ;
            background-color: steelblue;
            border: 2px solid yellowgreen;
        }

grid-2-dis-grid-temp-both-repeat-without-size.png

  1. _ _ _ -Gap :

Now we want that a item is covering more then one cel then this is possible by 'gap'

  • column-gap : _ _ px ; column-gap is for gap between columns. see how it works , first see code here - 
.container {
            height: 100vh;
            width: 700px;
            margin : 20px ;
            background-color: wheat;

            display : grid ;
            grid-template-columns: repeat(3, 1fr) ;
            /* grid-template-rows:  80px 200px 80px ; */

            column-gap : 100px ;
        }
        .all {
            /* height: 40px;
            width: 50px; */
            margin : 5px ;
            background-color: steelblue;
            border: 2px solid yellowgreen;
        }

grid-2-dis-grid-temp-both-repeat-col-gap.png

  • row-gap : _ _ px ; row-gap is for gap between rows. now you can see row gap with column gap -
.container {
            height: 100vh;
            width: 700px;
            margin : 20px ;
            background-color: wheat;

            display : grid ;
            grid-template-columns: repeat(3, 1fr) ;
            /* grid-template-rows:  80px 200px 80px ; */

            column-gap : 100px ;
            row-gap : 80px ;
        }
        .all {
            /* height: 40px;
            width: 50px; */
            margin : 5px ;
            background-color: steelblue;
            border: 2px solid yellowgreen;
        }

grid-2-dis-grid-temp-both-repeat-both-gap.png

short hand is gap - , syntax - **gap : _row-gap_ _column-gap_**., example - 

.container {
            height: 100vh;
            width: 700px;
            margin : 20px ;
            background-color: wheat;

            display : grid ;
            grid-template-columns: repeat(3, 1fr) ;
            /* grid-template-rows:  80px 200px 80px ; */

            gap : 130px 80px ;
        }
        .all {
            /* height: 40px;
            width: 50px; */
            margin : 5px ;
            background-color: steelblue;
            border: 2px solid yellowgreen;
        }

grid-2-dis-grid-temp-both-repeat-both-gap-2.png

Flexbox properties

We can use all flexbox properties with same values in grid .

  • justify-items : start/end/center/stretch ;
  • align-items : start/end/center/stretch/baseline ;

Shorthand for both syntax -- place-items : align-items justify-items ., example - place-item : center start

  • justify-content : start/end/center/stretch/space-around/space-between/space-evenly ;
  • align-content : start/end/center/stretch/space-around/space-between/space-evenly ;

short hand is place-content - , syntax - place-content : align-content justify-content ., example - place-content : start center .

  • grid-auto-column : _track-size_;,
  • grid-auto-row : _track-size_;

Note size can be in px or fr(fraction),

  • grid-auto-flow : row/column/dense ;,

example - grid-auto-flow : row;

Properties for child (grid item)

  1. grid-column-start / row-column-start -, This are use for define where to start column or row.

  2. grid-column-start : number/span<number>/span<name>/auto ;

  3. grid-column-end : number/span<number>/span<name>/auto ;

First we see grid-column- 

.container {
            height: 100vh;
            width: 700px;
            margin : 20px ;
            background-color: wheat;

            display : grid ;
            grid-template-columns: repeat(3, 1fr) ;
            /* grid-template-rows:  80px 200px 80px ; */

            /* gap : 130px 80px ; */
        }
        .all {
            /* height: 40px;
            width: 50px; */
            margin : 5px ;
            background-color: steelblue;
            border: 2px solid yellowgreen;
        }
        .item1 {
            grid-column-start: 1;
            grid-column-end: 3;
        }

grid-2-dis-grid-col-s--e.png

  1. grid-column-end/grid-row-end -, This are used for define where to end merge .

  2. grid-row-start : number/span<number>/span<name>/auto ;

  3. grid-row-end : number/span<number>/span<name>/auto ;
.container {
            height: 100vh;
            width: 700px;
            margin : 20px ;
            background-color: wheat;

            display : grid ;
            grid-template-columns: repeat(3, 1fr) ;
            /* grid-template-rows:  80px 200px 80px ; */

            /* gap : 130px 80px ; */
        }
        .all {
            /* height: 40px;
            width: 50px; */
            margin : 5px ;
            background-color: steelblue;
            border: 2px solid yellowgreen;
        }
        .item1 {
            grid-row-start: 1;
            grid-row-end: 3;
        }

grid-2-dis-grid-row-s--e.png

Both column and row given velues then find what here , we can use shorthand here

Shorthand for grid-column-start + grid-column-end, grid-column : _start-line_ / _end-line_;

grid-row-start + grid-row-end grid-row : _start-line_ / _end-line_;

Wecan show both here in code-

.container {
            height: 100vh;
            width: 700px;
            margin : 20px ;
            background-color: wheat;

            display : grid ;
            grid-template-columns: repeat(3, 1fr) ;
            /* grid-template-rows:  80px 200px 80px ; */

            /* gap : 130px 80px ; */
        }
        .all {
            /* height: 40px;
            width: 50px; */
            margin : 5px ;
            background-color: steelblue;
            border: 2px solid yellowgreen;
        }
        .item1 {
            grid-column: 1/ 3;
            grid-row : 1/ 3;
        }

grid-2-dis-grid-row-s--end.png

Flexbox properties

We can use all flexbox properties with sam evalues.

  • justify-self: start / end / center / stretch;
  • align-self: start / end / center / stretch;

shorthand for both is- align-self , syntax - align-self : align-self justify-self_;

All codess given here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            height: 100vh;
            width: 700px;
            margin : 20px ;
            background-color: wheat;

            display : grid ;
            grid-template-columns: repeat(3, 1fr) ;
            /* grid-template-rows:  80px 200px 80px ; */

            /* gap : 130px 80px ; */
        }
        .all {
            /* height: 40px;
            width: 50px; */
            margin : 5px ;
            background-color: steelblue;
            border: 2px solid yellowgreen;
        }
        .item1 {
            grid-column: 1/ 3;
            grid-row : 1/ 3;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="all item1">  one  </div>
        <div class="all">  two  </div>
        <div class="all"> three </div>
        <div class="all"> four  </div>
        <div class="all"> five  </div>
        <div class="all">  six  </div>
        <div class="all"> seven </div>
        <!-- <div class="all"> eight </div>
        <div class="all"> nine  </div>
        <div class="all">  ten  </div> -->
    </div>
</body>
</html>

Thankyou for reading , Suggest if any

#iNeuron #HiteshChaudhary #WebDev #Javascript #LCO #LearnCodeOnline #LCO #css #learncodeonline #cssselectors @hiteshchoudharylco code with hitesh choudharyiwritecode@hiteshchoudharylco@anuragtiwarime