https://www.youtube.com/watch?v=wWGjogHcLxY

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

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>

CSS Grid Layout - A "Quick" Overview

Comments

More from this blog

The AI Future Accelerator: 2-Day ADK Master Class

Agent Developer Kit (ADK) - The Deep Dive Workshop with Ady Ngom

Moving Zeros Code Challenge - JavaScript Data Structures and Algorithms

How to build a simple counter and a vending machine app with React hooks

[JavaScript] - How to craft intuitive and self-documenting code

A quick warning and request

Command Palette

Comments

More from this blog

A quick warning and request