Learn CSS Grid for free

14 interactive screencasts to take you from beginner to advanced

CSS Grid is a revolution and will become a must-have skill for front-end 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.

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
  • Create pages, image grids, and articles
  • Quick website prototyping
  • Advanced concepts

... and much more!

Full course content

tutorialindex.htmlindex.cssexamples.htmlexamples.cssbasic.css
    <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>
                <div class="menu">MENU</div>
                <div class="content">CONTENT</div>
                <div class="footer">FOOTER</div>
            </div>
unlisted
4:44
tutorialindex.htmlbasic.css
    <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">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
unlisted
3:10
tutorialindex.htmlindex.cssbasic.css
    .container {
        display: grid;
        grid-template: repeat(2, 50px) / repeat(3, 1fr);
        grid-gap: 3px;
    }
unlisted
3:38
tutorialindex.htmlindex.cssbasic.css
    .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;
    }
    
    .content {
        grid-column: 2 / -1;
    }
unlisted
6:36
tutorialindex.htmlindex.cssbasic.css
    .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;
    }
    
    .menu {
        grid-area: m;
unlisted
4:48
tutorialindex.htmlindex.cssbasic.cssper.jpg
    .container {
        display: grid;
        grid-gap: 5px;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        grid-template-rows: repeat(2, 100px);
    }
    
    
unlisted
3:44
tutorialindex.htmlindex.cssbasic.cssper.jpgpanorama.jpgthomas-kelley-64329.jpg
    .container {
        display: grid;
        grid-gap: 5px;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        grid-template-rows: 100px 100px;
        
    }
unlisted
1:55
tutorialindex.htmlindex.cssbasic.cssbig1.jpgbig2.jpgbig3.jpgnormal1.jpgnormal2.jpgnormal3.jpgnormal4.jpgnormal5.jpgnormal6.jpgnormal7.jpgnormal8.jpgvertical1.jpgvertical3.jpgvertical2.jpghorizontal3.jpghorizontal1.jpghorizontal2.jpgnormal9.jpg
    .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;
    }
    
    .big {
        grid-column: span 2;
unlisted
6:45
tutorialindex.htmlindex.cssbasic.css
    .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 {}
    
    .content {
        grid-area: content;
    }
    
unlisted
5:25
tutorialindex.htmlindex.cssbasic.css
    .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;
    }
    
    
unlisted
2:49
tutorialindex.htmlindex.cssbasic.css
    .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;
    }
    
    .menu {
        grid-column: 1 / 3;
    }
    
unlisted
3:13
tutorialindex.htmlindex.cssbasic.cssper.jpg
    .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;
    }
    
    
    
unlisted
2:00
tutorialindex.htmlindex.css
    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;
    }
    
    article > .aside {
        grid-column: 3;
unlisted
7:53
tutorialindex.htmlbasic.cssindex.css
    .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;
    }
    
    .header {
        grid-column: 1 / -1;
        display: flex;
    }
unlisted
5:02

What people are saying about Scrimba: