CSS Grids and Flexbox for Responsive Web Design
This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Table of Contents
Introduction and Setup
IntroductionAfter introducing herself, Jen provides an overview of the course.
ResourcesThe GitHub repository for this course is explored and described by Jen.
Defining Responsive DesignJen defines responsive design's three main characteristics: grid-based layout, images that resize, and media queries.
Overview of FloatsJen gives a brief overview of floats, including its history, its characteristics, pros and cons, and some examples are reviewed.
Float Exercise SetupThe exercise files are outlined and described by Jen as she sets up this coding challenge. She also covers a border declaration box to help with resizing elements.
Float Exercise SolutionJen gives us a walkthrough of the solution, and how it works at different screen sizes.
Introducing FlexboxJen introduces Flexbox, where it came from, what its requirements are, flex row vs. flex column and what its pros and cons are.
History and Browser SupportThree previous versions of Flexbox are explored, and Jen shows examples of prefixing for browser support, before getting into a discussion of current Flexbox support.
Code Demo: Flexbox SetupJen sets up a demo where that explores how Flexbox can change the page layouts by going through the different CSS properties. As part of the setup ’li’ HTML content is placed inside of a ‘ul’.
Code Demo: Flexbox Properties ExploredThe Flexbox properties Jen demonstrates here affect the ‘ul’, and include ‘flex', 'flex-direction', 'flex-wrap’, and ‘flex-flow’ for shorthand.
Code Demo: Flexbox JustificationJen explores Flexbox properties that justify content within the container ‘ul’ using ‘justify-content’.
Code Demo: Flexbox AlignmentUsing the Flexbox properties under ‘align-items’, Jen shows the different alignment options available within the container ‘ul’ in our example.
Code Demo: Individual flex-itemsSwitching to Flexbox properties that affect the individual flex-items, or the ‘li’ HTML elements in our example, Jen reviews ’flex-grow’, flex-shrink’, ‘flex-basis’.
Code Demo: Questions & AnswersJen answers question from the audience regarding the Flexbox code demo so far.
Flexbox Games and ExerciseJen introduces two great resources for playing with and practicing Flexbox properties.
Practical Use of Flexbox in a Grid SystemTo review practical applications of Flexbox in a grid system, Jen reviews ‘flexboxgrid.com’, a framework that allows you to explore various layouts to review the bare HTML and CSS to see whats possible with the properties.
Flexbox ReviewAs a review, and starting to apply Flexbox properties to the floating code exercise covered earlier, Jen covers some code we can use on the flex containers and flex items in the upcoming code demo.
Code Demo: Exercise Solution for DesktopReworking the code examples of the pie website layout done earlier with floats, Jen shows how to set up containers and items in HTML and take control of them in CSS for a desktop friendly grid system layout.
Code Demo: Exercise Solution for ResponsiveJen works through how to layout the code example for Tablet and Mobile formats.
Flexbox Exercise 1 Setup: Content ManipulationIn this coding exercise, Jen adds another row into the HTML code example and creates new requirements for this content to be solved with Flexbox CSS properties.
Flexbox Exercise 1 SolutionJen and the audience review a solution for this coding challenge.
Re-ordering Content and LayoutUsing 'flex-direction: row-reverse', and some CSS properties Jen rearranges the example content and layout in ways that were extremely difficult with floats.
Flexbox Questions and AnswersJen leads a discussion around different approaches to the previous exercise and content, and current best practices.
Flexbox Exercise 2 Setup: Full Webpage LayoutJen’s challenge in this exercise is to take a full webpage laid out with floats and restyle it with the grid system using Flexbox.
Flexbox Exercise 2 SolutionJen walks through how to solve this exercise and answers questions from the audience.
Flexbox Exercise 3 Setup: Image GalleryThis exercise challenge is to find two solutions to Jen's proposed image gallery problem. Number one is allowing images on the page in any number per row with any alignment you choose, and number two is allowing images to display in a fixed number per row for a given screen dimension.
Flexbox Exercise 3 SolutionUsing Flexbox, Jen creates two types of images galleries to solve this exercise.
Introducing Responsive ImagesIntroducing responsive images, Jen describes the different challenges around the desktop, mobile, and tablet in today's modern web. She then covers how to use the new <picture> tag released in HTML 5.1 to solve these problems, along with how to address backward compatibility.
Code Demo: Responsive Images ApplicationUsing the HTML elements <picture> and <source>, along with media queries, Jen demonstrates how to loading different images based on dimensions.
Picturefill for Older Browser CompatibilitySince older browsers do not work with the <picture> tag, Jen demonstrates a tool called "Picturefill" which can be used as a shiv.
Image Downloads and PerformanceJen explores what images your browser downloads based on the code you write.
Code Demo: Background ImagesUsing media queries in CSS, Jen applies a background image to the example website, along with answering some follow up questions from the audience.
Responsive Images ExerciseJen sets up an exercise to test your knowledge of responsive images, the <picture> tag, Picturefill and more.
Responsive Images Exercise SolutionJen demonstrates her code solutions to the challenges of this exercise.
Introducing CSS GridJen covers both where CSS Grid comes from, and why you should use it.
CSS Grid: Browser CompatibilityWhile browser support is quite good today, Jen touches whats currently supported at the time of recording, plus polyfills and fallbacks for older browsers.
Exploring CSS Grid ExamplesWith both PowerPoint and code demonstrations, Jen walks through how grids work with various examples and layouts. She also briefly covers reordering and syntax.
Code Demo: CSS GridThis code demo shows how to create a Mondrian painting in CSS and HTML using CSS Grid. Jen starts this demo as the first part of an exercise, and she uses "display: grid", "grid-row" and "grid-column" to start placement of the HTML elements
Mondrian Painting Exercise SetupThe class asks a clarifying question on how grids are laid out in rows, and Jen sets up a short exercise where the second half of the HTML elements are laid out from the demo earlier.
Mondrian Painting Exercise SolutionUsing ‘grid-row’ and g’rid-column’ for general placement and sizing, Jen lays out the solution for this exercise.
Additional CSS Grid PropertiesThree new properties are introduced by Jen to gain control over the sizes of the grid columns and rows: grid-template rows, grid-template-columns, and grid-gap. Also, Jen shows an extension for Google Chrome and Firefox for developers to measure elements in a web page. Finally, Jen also answers some clarifying questions around implicit vs. explicit grids.
Mondrian Painting 2 Exercise SetupA different, more complex Madrian painting is the basis of the exercise challenge here, and Jen walks through the starting point HTML and CSS to get you started.
Mondrian Painting 2 Exercise SolutionJen reviews her approach to this solution and talks through the potential CSS pitfalls of this exercise. She also goes into some additional layout exercises that modify the layout for optimal viewing at different resolutions with media queries.
CSS Grid: Practical ApplicationUsing the example pie site coded earlier with floats, and then Flexbox, Jen now wants to style this page using CSS Grids. She introduces the HTML and CSS files starting points and makes some changes to the first section of content as an example.
Practical Application Exercise SetupTo finish work on this example web page, Jen's exercise challenge is to complete the laying out the content using CSS Grid rules and classes.
Practical Application Exercise SolutionJen discusses her approach to the solution and discusses the possibility of using the ‘grid-row’ vs. the ‘order’ properties.
Properties ReviewCovering additional properties with a reference document, Jen reviews 'grid-template', 'grid-column', 'grid-row', along with different ways to denote widths such as px, fr, % and how span and repeat work.
Grid-area IntroductionJen introduces a method of using to use real names to define areas of a grid item's location by using ‘grid-area’ and ‘grid-template-areas’. Jen codes examples of how to use grid area to layout mobile, tablet and desktop resolutions.
Grid-area Exercise SetupAfter explaining how to create page layouts with 'grid-template-area', Jen's challenge is to create the desktop layout with this new tool.
Grid-area Exercise SolutionTo solve this quick exercise, Jen uses classes around the CSS media query and 'grid-template-areas' properties. She also leads a discussion around how layouts work with different ‘grid-template-columns’ options and ‘fr’ and "..." declarations.
Nesting CSS GridsBy coding an example of a nested CSS grid within a CSS grid at different resolutions, Jen discusses the pros and cons of this approach versus Flexbox withing a CSS Grid.
Nesting and Offsets Exercise SetupJen sets up an exercise that combines the nesting and offset concepts and answers a question about how the syntax around repeat and ‘fr’ works in the ‘grid-template-columns’ declaration.
Nesting and Offsets Exercise SolutionJen’s shows the solution to this exercise which uses ‘grid-template-columns’, ‘grid-template-areas’, and the ‘fr’ and ‘…’ syntax. Then she answers a question on using an approach that switches from ‘grid’ display to ‘block’ display for mobile vs. desktop resolutions.
Flexbox and CSS Grid Exercise 1 SetupReturning to the example pie webpage, Jen introduces this exercise which focuses on translating the Flexbox approach used earlier into a CSS Grid layout. She also recommends some great tooling in Firefox and the Firefox Developer build to understand better how Flexbox layouts are rendered and interpreted by the browser.
Flexbox and CSS Grid Exercise 1 SolutionWhile a full example of the completed solution can be reviewed in the "/end" folder for this exercise, Jen does a high-level recap which includes adding the wrapping elements to the HTML. Then she uses CSS Grid syntax to rebuild the layout.
Grid FallbacksAs a starting point for cross-browser compatibility, Jen highlights Rachel Andrew’s blog post which emphasizes on graceful fallbacks for older browsers without the need to completely fork your code.
Flexbox and CSS Grid Exercise 2 SetupIn this exercise, Jen’s challenge is to use Flexbox in an ideal scenario - as an image gallery. Using the same image gallery built earlier in Flexbox, this exercise focuses on integrating that into a grid layout within the example pie website.
Flexbox and CSS Grid Exercise 2 SolutionThis resulting solution is notable because, as Jen argues, this is the layout of the future with grid laying out the structure of the webpage, and flex laying out the ui elements within. The solution consists of adding some HTML to gain control over elements, and then defining their layout by adding Flexbox and grid-based styles.
Optional Practice Exercise: Putting it all TogetherJen sets up a challenge that can be completed later as a practice that uses all the tricks covered in this course. The challenge is to finish the build of the example pie website using best judgment incorporating everything taught in this course from scratch. To help give direction, Jen goes through highlights of her solution, and briefly touches on HTML5 forms, accessibility, and the <label> and <datalist> tags.
ConclusionJen opens the discussion up for questions, talks about current and future browser support and gives her conclusion and contact information.