Скачать или смотреть How and when to use CSS Grid for layout: Columns, spanning, and placement

Learn how to use CSS Grid to lay out the recipe cards in the Recipe for Disaster series, and why I chose CSS Grid over other layout techniques for this piece of the assignment, including floats and flexbox! This step by step tutorial will teach you how - and why - to use CSS grid, while reinforcing your skills with writing media queries in CSS by writing responsive, mobile-first styles. We'll start by reviewing some layout techniques you already know, including floats and flexbox, and how I'm able to tell from my design that they aren't the best choice for this layout. Then, you'll learn basic techniques for using CSS Grid, including how to set up columns at different breakpoints using grid-template-columns, how to have an item stretch across multiple columns using grid-span, and how to change the placement of an item in the grid using grid-column-start. We'll learn several new techniques for troubleshooting CSS Grid using our web inspector along the way. Get ready to learn grid!


Chapters in this video:
[00:00] Introduction
[01:09] How to identify breakpoints from mockups in Adobe XD
[01:58] Set up your workspace using Responsive Design Mode in Firefox
[02:31] Write a media query to fix the background not reaching the bottom
[03:37] Make sure recipe directions has the background
[04:32] Ensuring you use a selector in your media query
[05:40] Styling the cards: Why floats aren't the best choice
[07:47] Styling the cards: Why flexbox isn't the best choice either
[09:06] How to get flexbox to break to the next line
[09:36] Styling the cards the right way: Using CSS Grid
[10:32] How to set up columns in CSS Grid
[11:43] How to set up spacing between items in CSS Grid
[12:11] Use the grid inspector in Firefox to troubleshoot CSS Grid
[12:35] How to make an item span multiple columns in CSS Grid
[13:54] Adding a final breakpoint for small desktop
[15:31] How to shift the placement of items in CSS Grid
[16:11] Checking how the styles look all together
[16:38] Final touches: Adding a max width style to the content
[18:02] Closing remarks