Practical CSS Grid: Learn Grid Layout in under 2 hours!

Name: Practical CSS Grid: Learn Grid Layout in under 2 hours!
Rating: 4.7 (51 reviews)

Learn CSS Grid via practical examples using design patterns you know with new and game-changing tweaks

Created byBryan Robinson

Last updated 8/2019

English

What you'll learn

Learn what you need to put CSS Grid Layout into production in 2 hours
Learn Revolutionary new tweaks to design patterns you know
Take home practical examples of CSS Grid in production
New design patterns for interesting layouts on the Web

Course content

3 sections • 12 lectures • 1h 49m total length

Introduction2:12
Hey everyone! Welcome to Practical CSS Grid! Now, you’re here, so you’ve obviously heard that CSS Grid is “the new hotness.” I’m here to tell you, though, it is the biggest dynamic shift in web design since the invention of CSS itself. It changes everything from the way we build sites to the way we design sites.
In this course, I’ll walk you through some basic terminology for grid, and then we’ll dive right in to practical examples with design patterns you’re used to, remixed in new and interesting ways!
Before we get started, let me tell you a little bit about myself. My name is Bryan Robinson and I’ve been a professional designer and developer for well over a decade now. I’ve worked in house on large projects and on small to medium websites for agencies. Now, I focus on teaching modern development practices to designers and developers via my company Code Contemporary.
I started researching Grid about 5 months before it was fully implemented, after watching multiple videos from Jen Simmons — a personal hero of mine. She was talking about the future of web design and I was intrigued. I even converted my blog over to CSS Grid behind feature queries before Grid was in any browser.
This course is really the culmination of a now years-long infatuation with this amazing CSS Feature. I’m really excited to share practical examples of how to get Grid up and running. Thanks for joining the course, and let’s get going!
CSS Grid Definitions3:01
In this lecture, I do a short dive into the abstract terms you may need to know when talking about CSS Grid.
Code for the Exercises1:39
A quick tour of the various files for following along with the exercises. Download them here.

Exercise 1: Building a Simple Grid8:55
In this lesson, we'll cover creating a very simple grid using the following properties and values:
display: grid
grid-template-columns
grid-gap
the fr unit
Exercise 2: Fluidly Responsive Grid with no Breakpoints9:18
In this lesson we'll take what we learned from Exercise 1 and make our grid responsive with NO break points. Concepts we'll use:
repeat()
minmax()
box-alignment
Exercise 3: An Asymmetric Grid11:19
One of the big benefits of CSS Grid is how easy it is to introduce asymmetry to design. In this lesson, we'll do an article grid, but make it interesting with different sized items. Concepts discussed:
grid-auto-flow
grid-column/grid-row
CSS span keyword
box-alignment
Exercise 4: Art Directed Banners22:55
Grid makes adjusting layout easy. Using the same grid template declarations, we'll explore how we can place items on the grid to art direct banners. Concepts used:
grid-template-rows
Explicit placement with grid-row and grid-column
Exercise 5: Big Responsive Changes25:57
In this lesson, we'll discuss how to make large layout changes between various break points with very little code. Concepts we'll use:
Named Grid Lines
grid-template-areas
Mobile-first development
Bonus Exercise: Asymmetric Promotional Area9:34
In this lesson, we'll take a look at how Grid can create interesting banner areas by utilizing an asymmetric grid to showcase 4 promotional spaces at a time.
We'll review the following properties:
grid-template-areas
minmax()
repeat()
Bonus Exercise: Creating a "breakout" section of an article body12:31
In this exercise, we'll create a basic article design. Inside this article, we'll create a breakout template for a gallery space. This area will be 100% of the browser width while the column of content remains at a readable length.
Explore "Variable Squishiness"
minmax()
Grids within Grids

Requirements

Assumes basic levels of CSS knowledge
Assumes basic levels of HTML knowledge

Description

You've heard about CSS Grid layout. You know it's the new hotness in the web design world, but you haven't started using it yet. Many tutorials out there focus on the new properties themselves and don't give practical examples. Let me walk you through all its features in a simple, practical approach. By the end of this course, you'll understand Grid and have practical examples to put into production right away!

Who this course is for:

Designers and Developers looking to learn modern CSS
People who have heard about CSS Grid but were intimidated
People wanting to do new interesting layouts on the Web

Practical CSS Grid: Learn Grid Layout in under 2 hours!

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 7min

Exercises7 lectures • 1hr 40min

Use Grid Today!2 lectures • 2min

Requirements

Description

Who this course is for: