Using Grid with Flexbox3:59 with Guil Hernandez
CSS Grid is not meant to replace Flexbox. Flexbox and Grid are complementary layout tools, and each have their specialties.
CSS grid is not meant to replace Flexbox. 0:00 Flexbox and 0:03 Grid are actually complimentary layout tools, and each have their specialties. 0:04 As you learned, at the beginning of the course, the biggest difference between 0:09 the two is that Flexbox lays out items in a single dimension, in a row, or a column, 0:12 and Grid lays out items in two dimensions, rows and columns at the same time. 0:17 So before we wrap up, I'll demonstrate why Grid and 0:22 Flexbox together are a powerful combination. 0:25 You can launch the new workspace with this video to code along, or kick back for 0:28 a bit and just watch, then try it for yourself later. 0:33 In the HTML I have six card items inside a main content div. 0:35 Now they are not laid out using Grid yet, 0:42 so first I'll turn on the Grid, in layout.css. 0:46 I'll set main content display: grid. 0:50 Then set column tracks with grid-template-columns. 0:54 I'll use repeat notation to auto-fit items inside the grid container. 1:00 So I want the columns to be no narrower than 280 pixels, but 1:07 expand to take up any free space. 1:12 So I'll set a minimal(280px, 1fr) and 1:15 I'll apply a grid-gap: 20 px. 1:21 So I've quickly set up a responsive three column layout with grid. 1:30 Now I'd like to align all the learn more buttons with the bottom 1:35 edge of each card regardless of the amount of content inside them 1:40 that way they all line up perfectly across the page. 1:44 Well what Flexbox does best is align and distribute space within a single access. 1:48 You learn that a grid item, can also be a grid container, that's how you nest grids. 1:54 Well a grid item can also be a flex container, 1:59 that lays out its children with Flexbox. 2:02 So Flexbox is what works best in this situation, 2:04 to make aligning buttons to the bottom edges easier. 2:08 So I'll make the cart items flex containers so that I can have full control 2:11 over the direction and alignment of the content inside them. 2:15 In my style sheet I'll target the class .card and set its display: flex. 2:19 Now I'll need to set the card's flex-direction: column. 2:31 That way the content gets vertically stacked inside the cards. 2:41 Finally, I'll select the buttons and give them a margin top property. 2:45 When I set the value to auto it pins the buttons to the bottom of the cards. 2:54 Remember Flexbox and CSS Grid are good at different things, and 3:01 should be used together, not as alternatives to each other. 3:05 You can use Grid to place your main content inside columns and rows, and 3:09 use Flexbox to position the smaller details of your design like buttons and 3:15 navigation menus. 3:19 CCS Grid gives you a whole new set of tools for 3:22 building complex layouts in less time. 3:25 As you continue to explore the capabilities of Grid you'll realize that 3:27 there are different methods for creating the same end result. 3:31 So I encourage you to keep practicing, and experimenting with Grid, and 3:35 begin using it in your projects to create common layout patterns. 3:38 We've only just scratched the surface of what's possible with CSS Grid. 3:42 So be sure to review the Grid resources posted in the teacher's notes, 3:46 and we're always here to help. 3:49 So if you have questions about anything covered in this course, 3:51 feel free to reach out to the Treehouse staff or other students in the community. 3:53 Thanks everyone and happy coding. 3:57
You need to sign up for Treehouse in order to download course files.Sign up