Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io

Today we look at how we can imitate the way Bootstrap works.

For those of you who aren’t familiar with Bootstrap. It is a library that provides developers the ability to quickly create responsive websites from predefined classes assigned to HTML elements.

The power of Bootstrap comes from limiting the amount of CSS to be written as these elements have been made into a series of reusable components. …

Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io

In this post we look at fine tuning CSS for the code editors and settings footer.

Styling Code Editors

Each editor has a HTML structure like this:

Editor headers

At the moment the editor headers are vertically spaced. So we’ll:

• create a grid inside the editor header
• place the buttons and title in a single row
• push the right button to the far right
• remove the vertical stretch of the buttons
• give them a padding of 5px
• space them with a grid gap of 5px
• add a translucent background

.editor__header { display…

Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io

In this post we look at fine tuning CSS for the pen header.

Styling Pen header

For the pen header, we’ll add:

• a black background
• a 5px border at the bottom of the header — using custom grey
• white text
• padding of 10px

We’ll start by defining our custom grey at the top of our CSS file.

:root {
    --grey: #343436;
};

To reference it, we call it as a variable: var(--grey)

.pen { display: grid; grid-template-columns: 1fr; grid-auto-flow: column; align-items: center; grid-gap: 10px; background: black; border-bottom: 5px solid var(--grey)…

Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io

Today we take on another project of recreating Codepen using CSS — i.e. no JavaScript. So this will be a focused exercise into creating the layout with only CSS Grid.

Wesbos has provided us with base HTML and CSS which has no CSS Grid styling yet.

Below is what we’re working with.

Basic Structure

Eventually, as we start applying CSS Grid, the design will look something like this:

Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io

With an interactive hover experience for our image gallery, it’s time to include a preview overlay.

We’ll be using a bit of JavaScript to make this happen.

Within our script tags, we need to grab all the items. Then for each of those items, we assign an event listener to pick up any clicks. When a click happens, the custom function we define called handleClick will run.

const items = document.querySelectorAll('.item');items.forEach(item => item.addEventListener('click', handleClick));

We haven’t written the handleClick function. …

Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io

In part 2 we created an image gallery that shuffles the tiles around to try fit every image without spaces as the window gets resized.

Now we look into improving how the images are presented, as well as adding hovering effects for clicking functionality.

At the moment, all the images are shown at full size, which means anything that spans less than 4 is cropped out. …

Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io

Now that we have images generated within our gallery, we can begin applying CSS Grid and custom styling to size our images.

To begin, we give our container the ability to use CSS Grid:

.gallery {
    display: grid;
}

Each grid cell needs to be 100px wide. We don’t know how many columns we need as it will depend on the width of the window — so we’ll use auto-fill to help us determine this.

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
}

We don’t know how…

Live dev notes taken throughout the CSS Grid course by Wesbos — cssgrid.io

Today we explore the implementation of grid-auto-flow: dense in the creation of an image gallery.

This image gallery design isn’t something you would normally see on sites that require images to be laid out, but a creative idea that pushes the boundary of what’s possible.

This project will also require a bit of JavaScript.

The base elements we need are:

Overlay

When we click into any of the tiles, a transparent overlay (transluscent black covers the site) with the image sized at 100% sitting in front.

<div class="overlay"> <div class="overlay-inner"> <button class="close">× Close</button> <img>…