grid layout

CREATING COLUMNS IN GRID LAYOUT

 .container{
        display: grid;
        /* grid-template-columns: 300px 100px 100px; */
        /* grid-template-columns: 300px auto 100px; */
        /* grid-template-columns: 1fr 4fr 1fr; */
        grid-template-columns: repeat(3, auto);
        grid-gap: 2rem;
    }

CREATING ROWS IN GRID LAYOUT

  .grid{
        display: grid;
        grid-template-rows: 1fr 1fr 4fr;
        grid-auto-rows: 2fr;
        grid-template-columns: repeat(4, 2fr);
        grid-gap: 1rem;
    }

grid auto row will give width to all the rows having non specified height

GIVING INDIVIDUAL SPACING BETWEEN COLUMN AND ROW

.container{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(4, 1fr);
        /* grid-column-gap: 7rem;
        grid-row-gap: 1rem; */
        grid-gap: 1rem;
         }

COMBINING MULTIPLE ROW AND COLUMN TOGETHER

.box:first-child{
        /* grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 3; */
        grid-column: 1 / span 3;
        grid-row: 1 / span 3;
    } 

THIS IS HOW WE MAKE GRID RESPONSIVE

.container{ 
            display: grid; 
            grid-gap: 1rem;
            /* grid-template-columns: 112px 112px 112px;  */
            /* grid-template-columns: 1fr 1fr 1fr;  */
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            /* justify-content: center;  */
        }

THIS IS THE BEST WAY TO CREATE A LAYOUT IN GRID 

.container{
        display: grid;
        grid-gap: 1rem;
        grid-template-areas: 
        'navbar navbar navbar navbar' 
        'section section section aside'
        'footer footer footer footer ';

 #navbar{
        grid-area: navbar;
    }
    #section{
        grid-area: section;
    }
    #aside{
        grid-area: aside;
    }
   footer{
        grid-area: footer;
    }

FIRST WE WILL HAVE TO DEFINE A ID THEN WE WILL MAKE THE GRID AREA

WE CAN MAKE THE WEBSITE RESPONSIVE USING MEDIA QUIRES 

 .container {
            grid-template-areas:
                'navbar navbar navbar navbar'
                'section section section section'
                'aside aside aside aside'
                'footer footer footer footer ';
        }
        aside{
            display: none;
        }
        span{
            display: block;
            text-align: center;
        }
    }

    @media only screen and (min-width: 300px) and (max-width:500px) {
        body {
            background-color: blue;
        }
        .container {
            grid-template-areas:
                'navbar navbar navbar navbar'
                'section section section section'
                'aside aside aside aside'
                'footer footer footer footer ';
        }
        aside{
            display: none;
        }
        span{
            display: block;
            text-align: center;
        }
    }

    @media (min-width: 500px) and (max-width:800px) {
        body {
            background-color: yellow;
        }

        .container {
            grid-template-areas:
                'navbar navbar navbar navbar'
                'section section section section'
                'aside aside aside aside'
                'footer footer footer footer ';
        }
        span{
            display: block;
            text-align: center;
        }
    }

    @media (min-width: 800px) {
        body {
            background-color: green;
        }
    }

    .bdr {
        border: 2px solid black;
        padding: 10px 23px;
        background-color: wheat;
    }

    nav {
        grid-area: navbar;
    }

    section {
        grid-area: section;
    }

    aside {
        grid-area: aside;
    }

    footer {
        grid-area: footer;
        text-align: center;
    }