Grid Layout in a nutshell

what is a grid ?
a grid is a 2-d structure of columns and rows . specifically a CSS grid consists of different blocks of html arranged in rows and columns. for example

<div class="grid-example">
        <div class="grid-element-1">1</div>
        <div class="grid-element-2">2</div>
        <div class="grid-element-3">3</div>
        <div class="grid-element-4">4</div>
        <div class="grid-element-5">5</div>
        <div class="grid-element-6">6</div>
    </div>

here in the above html code grid-example is the name of the container class and grid-element-(1,2,3,4,5,6) are the elements of grid container. to arrange these element in the form of row and column there are plenty of properties used we can use them according to the layout of the page.
for example by using the basic grid template property I am going to generate a grid of 3 columns and 2 rows from the above html code.

       .grid-element-1{
            background-color: black;
            color: white;
        }
        .grid-element-2{
            background-color: white;
            color: black;
        }
        .grid-element-3{
            background-color: black;
            color: white;
        }
        .grid-element-4{
            background-color: white;
            color: black;
        }
        .grid-element-5{
            background-color: black;
            color: white;
        }
        .grid-element-6{
            background-color: white;
            color: black;
        }

the above css generate the following pattern

now I am making this containers display grid see what happens . nothing much happens until we use the properties grid-template-columns.

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

you can see a 2*3 grid is generated having each block of 100px from the above code when it is added to the CSS file or entered in style tag .
grid-template-column is a property of the grid that specifies tracks in a grid columns how many and how much is their length is specified with grid-template-columns. similarly is the property of grid-template-rows that specifies tracks in row and their length .

Properties associated with grid

grid-tempelate-column
The grid-template-columns CSS property defines the line names and track sizing functions of the grid columns.
that is it defines the no. of columns in a grid and the size of each column in a grid . each individual column is a track on which html markup for different block is developed hence they are called tracks. for example

grid-template-columns: 160px 160px;

the above declaration of grid property generates two blocks of 160px each .
grid-template-columns: 1fr 60px;
the above declaration is same as the one which we used before it also generates the tracks in same way that is 2 in number but length of 1 track is 1fr that is total width of viewport minus the 60px of the second track .
fr here specifies a size unit dealing in fractions of width of the screen more prominently the viewport of the screen.
for example if i specify the tracks as

1fr 1fr 1fr 1fr

than it can be assumed all the tracks are of 1/4 the width of
viewport.

follow the link to mdn reference of the above property to learn more

grid-template-rows

The grid-template-rows property defines the height of each row.
everything is similar to the grid template column property from declaration to tracks of rows.

follow the link to mdn reference of the above property to learn more

gap
gap property is used to specify spacing between two or more grids elements. this is shorthand property for various grid gap properties combined together.