Learn CSS Grid for free

Learn CSS Grid
    <html>
        <head>
            <link rel="stylesheet" href="basic.css">
            <link rel="stylesheet" href="examples.css">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        </head>
        <body>
            
            <!-- CSS Grid -->
            <h1 class="title">CSS GRID</h1>
            <div class="wrapper">
                <div class="header">HEADER</div>
    <html>
        <head>
            <link rel="stylesheet" href="basic.css">
            <style>
                .container {
                    display: grid;
                    grid-template-columns: 100px auto;
                    grid-template-rows: 50px 50px 200px;
                    grid-gap: 3px;
                }
            </style>
        </head>
        <body>
            <div class="container">
    .container {
        display: grid;
        grid-template: repeat(2, 50px) / repeat(3, 1fr);
        grid-gap: 3px;
    }
    .container {
        display: grid;
        grid-gap: 3px;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 40px 200px 40px;
    }
    
    .header {
        grid-column: 2 / -1;
    }
    
    .menu {
        grid-row: 1 / 3;
    }
    .container {
        height: 100%;
        display: grid;
        grid-gap: 3px;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 40px auto 40px;
        grid-template-areas: 
            ". h h h h h h h h h h ."
            "m c c c c c c c c c c c"
            ". f f f f f f f f f f .";
    }
    
    .header {
        grid-area: h;
    .container {
        display: grid;
        grid-gap: 5px;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        grid-template-rows: repeat(2, 100px);
    }
    
    
    .container {
        display: grid;
        grid-gap: 5px;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        grid-template-rows: 100px 100px;
        
    }
    .container {
        display: grid;
        grid-gap: 5px;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        grid-auto-rows: 75px;
        grid-auto-flow: dense;
    }
    
    .horizontal {
        grid-column: span 2;
    }
    
    .vertical {
        grid-row: span 2;
    .container {
        height: 100%; 
        display: grid;
        grid-gap: 3px;
        grid-template-columns: [main-start] 1fr [content-start] 5fr [content-end main-end];
        grid-template-rows: [main-start] 40px [content-start] auto [content-end] 40px [main-end]; 
    }
    
    .header {
        grid-column: main;
    }
    
    .menu {}
    
    .container {
        border: 1px solid black;
        height: 100%;
        display: grid;
        grid-gap: 5px;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(2, 100px);
        justify-content: space-around;
       // align-content: center;
    }
    
    
    .container {
        height: 100%; 
        display: grid;
        grid-gap: 3px;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 40px auto 40px;
        //justify-items: center;
        //align-items: center;
    }
    
    .header {
        grid-column: 1 / -1;
    }
    
    .container {
        border: 1px solid black;
        display: grid;
        grid-gap: 5px;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        grid-template-rows: 100px 100px;
    }
    
    .container2 {
        border: 1px solid black;
        display: grid;
        grid-gap: 5px;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        grid-template-rows: 100px 100px;
    article {
        display: grid;
        grid-template-columns: 40px 1fr 40px;
        grid-column-gap: 10px;
    }
    
    article > * {
        grid-column: 2;
        min-width: 0;
    }
    
    article > figure {
        grid-column: 1 / -1;
        margin: 20px 0;
    .flexbox-header {
        display: flex;
    }
    
    .flexbox-header > div:nth-child(3) {
        margin-left: auto;
    }
    
    .grid-page {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 40px 200px 40px;
    }