CSS Grid Layout - A "Quick" Overview

#showdev #css #beginners #tutorial

A quick warning and request

One of my friend told me that he learned a lot from the video even though it was a bit long - 25mn is kinda long. If you speed it up to 1.5x it is still watchable but at 2x I start to sound like a total chipmunk and you might find it entertaining.
I hope you enjoy it and learn something from it if CSS Grid is new to you. I really miss working on the User Interface side, let me know in the comments if you would like to see more posts around UI

In this tutorial we’ll take quick look at the power offered by the CSS grid system. It’s almost time to get rid of all the framework code you’ve grown so used to once you see the potential of the CSS grid.

The starter coded is added inline or you can copy it from here:
Grid starter code

And the template used can be downloaded here:
Elton UI Kit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Elton ui Kit</title>
    <style>
        @import 'https://fonts.googleapis.com/css?family=Comfortaa:300,700|Bungee+Shade|Josefin+Sans:400';

        html {
            background-color: #eee;
        }
        html, body {
            margin: 0;
            padding: 0;
        }
        body {
            counter-reset: section;
        }
        .wrapper {
            width: 1170px;
            margin: 30px auto;
            box-sizing: border-box;
        }
        .box {
            border-radius: 3px;
            background-color: #ffffff;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
        }
        .hero-fashion > .box {
            width: 1170px;
            height: 505px;
            margin-bottom: 30px;
        }
        .row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-auto-rows: 238px;
            grid-gap: 30px;
        }
        .tall-span {
            grid-row: span 2;
        }
        .wide-span {
            grid-column: span 2
        }

    </style>
</head>
<body>
    <div class="wrapper">

        <!-- hero section -->
        <div class="hero-fashion">
            <div class="box"></div>
        </div>

        <!-- grid section -->
        <div class="row">
            <div class="box tall-span"></div>
            <div class="box wide-span"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box wide-span"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </div>
</body>
</html>

Top comments (8)

John • Jun 5 '19

Thanks for a very informative video.

Can you tell me, now that there is css grid, do you use flexbox at all. Do you ever have a need to use both css grid and flexbox on the same project?

Going forwards, do you think flexbox will become redundant, since css grid seems to master layout?

:-)

Ady Ngom • Jun 5 '19

I actually do use both and I don't that one will replace the other or make the other obsolete. I personally use the grid for the 'boxes' layout but often times use flexbox inside the individual. Subgrids are also great but a bit harder to digest.
In short I think there are more complementary than exclusive. Hope it helps :)