Ultimate CSS Grid & Layout Techniques, v3

Jen Kramer

Jen Kramer

AnnieCannons
6 hours, 21 minutes CC
Ultimate CSS Grid & Layout Techniques, v3

Course Description

CSS Grid is the most important tool in a modern web developer's toolkit for laying out web pages. With its two-dimensional structure, precise positioning, and overlapping elements, you’ll learn to achieve complex layouts with minimal code. You'll also explore advanced techniques like container queries for adaptive components and subgrids for nested layouts. Through hands-on CodePen exercises, you'll apply these techniques to real-world projects!

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: May 8, 2024

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 10 minutes
  • Introduction
    Jen Kramer begins the course by sharing a history of page layout from the early days when there was little CSS support through today when there is full support for CSS Grid and advanced layout features like container queries and subgrid. The course website is provided. Exercises will be coded in CodePen. Grid and Flexbox are compared.

Grid Basics

Section Duration: 32 minutes
  • Grid Overview
    Jen explains that CSS Grid is best for layouts that span across rows and columns and sibling elements that need to overlap or cover each other. The properties available for styling depend on whether the styles are applied to a parent or child element.
  • Your First Grid
    Jen creates a CSS class to display the figure elements in a grid layout. The `display: grid` style is applied, and the `grid-template-columns` property creates the desired number of columns.
  • Inspecting Grid with Dev Tools
    Jen demonstrates how to use the Chrome Developer Tools to inspect grid-based layouts. Row and column indicators appear and gaps between the rows and columns are shaded.
  • Basic Grid Exercise
    Students are instructed to make each figure element as a grid item and use the grid layout properties to have the caption appear to the right of the image. After the exercise, the layout is refined by centering captions vertically and creating a more complex two-column layout. The final code can be found at the CodePen link below.

Grid Span & Area

Section Duration: 18 minutes

Responsive Design & Media Queries

Section Duration: 1 hour, 6 minutes

Overlapping Cells & Subgrid

Section Duration: 1 hour, 2 minutes
  • Overlapping Rows & Columns
    Jen uses an overlapping row technique to make a figure's caption overlap the bottom part of an image. When elements overlap in a grid row or column, the element appearing later in the HTML will be on top. The layout is tested, and an additional media query is added to adjust the caption size.
  • Overlapping Grid Layout
    Jen uses the overlapping row & column technique to layout five planet images. The fifth image of the Earth overlaps the four other images and is rotated to look like a diamond. The final solution can be found at the CodePen link below.
  • CSS Animated Grid Exercise
    Students are instructed to use a CSS Grid layout to overlap two images. A CSS animation should be added to fade the second image in and out.
  • Grid Margin
    Jen spends a few minutes discussing issues that arise with vertical margins and CSS Grid. Vertical margins typically collapse so elements do not have double margin spacing. However, with grid gap, this may not be the case. A solution is demonstrated and alternatives are also discussed.
  • minmax, auto-fit, & auto-fill
    Jen demonstrates how minmax, auto-fit, and auto-fill functions can constrain columns and create more controlled layouts. The minmax function specifies a minimum and maximum width. The auto-fit and auto-fill functions control will either fill a grid row with as many columns as possible or fit columns across the entire width of the container.
  • Subgrid
    Jen introduces CSS subgrid, which provides more granular control of elements nested within a grid layout. So when these nested elements become grid containers, their children can track across the rows and columns of the parent grid container.
  • Subgrid in Action
    Jen applies the subgrid to the planet and moon page layout to help align the headlines, buttons and images for all the nested card elements.

Moons of Saturn Exercise

Section Duration: 48 minutes

Flexbox

Section Duration: 59 minutes
  • Where to use Flexbox
    Jen explains Flexbox is excellent for a series of containers not the same size or elements that aren't displayed in an evenly sized grid. Flexbox helps achieve equal spacing between elements in layouts where the size of the elements is not consistent.
  • flex-direction & flex-wrap
    Jen demonstrates the flex-direction and flex-wrap properties. The values for flex-direction can be row, row-reverse, column, or column-reverse. The flex-flow property can be used as a shortcut for the flex-direction and flex-wrap properties.
  • justify-content & align-items
    Jen demonstrates the justify-content & align-items Flexbox properties. The justify-content property will align elements across the main axis. The align-items property aligns elements across the opposite (cross) axis. Properties like order and flex-basis which can be applied to child elements are also demonstrated in this lesson.
  • Navbar with Flexbox
    Jen styles a navbar using Flexbox. The navbar is justified to the end (right) of the Flexbox container and margin-right is used on the logo to separate it from the navigation items. A max-width media query is added to adjust the layout on smaller screen sizes.
  • Responsive Navbar on Desktop
    Jen adds additional styles for larger screen sizes for the navbar. The logo is displayed on larger screens after the first two navigation items and before the last two. The Flexbox order property is used to reorder the elements.
  • Flexbox Layout Exercise: Medium Screens
    Students are instructed to add a media query for screens larger than 600 pixels and apply a Flexbox layout to the cards. Cards should wrap, forming two rows with three on top and two on the bottom. The beginning CodePen for this exercise is linked below.
  • Flexbox Layout Exercise: Large Screens
    Students are instructed to add a media query for screens larger than 900 pixels and adjust the Flexbox layout to display cards across a single row. The cards should be justified at the bottom so the buttons line up. The final solution can be found at the CodePen link below.

Responsive Images

Section Duration: 28 minutes
  • Responsive Images Overview
    Jen discusses the history and challenges of images in responsive designs. There are many strategies for optimizing for pixel densities, display dimensions, or art direction. The picture element is also introduced in this lesson.
  • srcset & sizes Attributes
    Jen talks through the srcset and sizes attributes and compares them with the responsive image techniques of the picture element. While the picture element was good for content purposes, srcset and sizes allow the correct image to be loaded based on technical parameters like viewport size, pixel density, aspect ratio, etc.
  • Picture Element
    Jen uses the picture element to control the visibility of four different images. The srcset attribute specifies the URL of the image. The media attribute contains a media query with the conditions for when the images should be displayed.

Container Queries

Section Duration: 53 minutes
  • Container Queries
    Jen introduces CSS container queries and explains there are two different options available. Container size queries consider the width of the container, not the viewport width like a media query.
  • Container Size Queries
    Jen uses container queries to style various layouts for the cards. The layouts are applied when a card container has a minimum width of 200, 250, 500, and 550 pixels. An important thing to remember about container queries is that while they are based on the size of the container, only child elements of the container can be styled.
  • Featured Card Exercise
    Students are instructed to use container queries to style the first card in the design to match the reference design. A "featured" class should be added to the container and image, headline, paragraph,and button should remain in a single column.
  • Card Page Layout
    Jen completes the card page layout by adding media queries to display cards in columns on larger screen sizes. The existing container queries control the layout of the elements in the individual cards based on their container's size.
  • Changing Themes with Style Queries
    Jen demonstrates container style queries by creating a dark mode toggle. When a checkbox is toggled, JavaScript code updates a CSS custom property. A container style query styles the page based on the value of the custom property.

Wrapping Up

Section Duration:

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now