Learn CSS Grid for free

Learn CSS Grid for free

    <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;
    }
    

CSS Grid is a new superpower for web developers 🦸‍♂️

This new CSS module makes it easier than ever to create website layouts. It simplifies both your HTML and CSS, while simultaneously giving you more control over your layout. You can use it without any framework, as the CSS Grid module is native to the browser.

So if you want to stay up-to-date as a front end developer, you'll need to learn how to use CSS Grid! Luckily though, it's not hard. And this course teaches you all you need to know. For free, of course.

Course content

This course contains three sections. The first two will teach you the core concepts you need to know to get started. Together, we’ll build both a website layout and a super cool image grid.

In the bonus section, you’ll learn how to create article layouts with CSS Grid plus some more advanced concepts.

What you’ll learn

  • CSS Grid fundamentals
  • Your first grid
  • Responsive grids
  • How to create pages, image grids, and articles
  • How to quickly prototype websites
  • How to use Grid with Flexbox
  • Advanced concepts

You'll be proficient with the following parts of CSS Grid when you complete the course:

  • display: grid, grid-gap
  • grid-template, grid-template-colums, grid-template-rows
  • fr, repeat, minmax, auto-fit, auto-fill
  • grid-auto-rows
  • grid-colum, grid-row
  • grid-template-areas and grid-area
  • justify-items, align-items
  • justify-self, align-self

And remember, this isn't a regular video course, it's a Scrimba course! Which means you can interact with the code inside the tutorials whenever you want. This makes learning a lot more fun!

Feel free to reach out to the instructor Per Harald Borgen on Twitter if you have feedback or questions.