CSS Grid vs Flexbox for Composable Layouts

[00:00 - 00:13] Hey everybody, Travis here with another lesson in Composing Layouts in React. In today's lesson we are going to learn about CSS Flexbox and CSS Grid as Composable Layouts.

[00:14 - 00:28] Now up until relatively recently, CSS technically only supported one form of layout, which is normal flow, the one we learned in the last lesson. Now developers have been hacking around this for years, using tables or flows.

[00:29 - 00:46] Now this often had frustrating problems since we were using tools in a way that they weren't specifically designed for. It's pretty impressive what these early innovators were able to do, but it virtually required that we used a framework like Bootstrap or Foundation to lay out anything consistent beyond the web.

[00:47 - 00:54] Luckily for us, this is no longer the case. CSS now has two layout options, CSS Grid and CSS Flexbox.

[00:55 - 01:07] In this lesson we will learn the basics of CSS Grid and Flexbox and how to use them in a Composable way. Now when you set an elements display property to Grid, it does two things.

[01:08 - 01:23] First the element becomes a Grid container and all the direct children and only the direct children become Grid items. Now in the Grid container element, you can define tracks of columns and rows.

[01:24 - 01:43] Columns and row sizes can be defined either explicitly or implicitly by allowing Grid to determine the height and width. The browser then places the Grid items in these tracks for us, fully left to right and then top to bottom to fill up one row at a time.

[01:44 - 02:07] Now we can write something like this, setting Grid type one columns to have two columns, one of 30 pixels and one of 100 pixels and two rows of 30 pixels and then 200 pixels. So the first item is our red box and it will go in the first column on the first row which is 30 by 30.

[02:08 - 02:23] The orange box will be placed in the second column on the first row which will be 30 by 100. And so on, the yellow gets placed in the next row in the first column.

[02:24 - 02:35] The green box gets placed in the second column in the second row. Now the last row, since we're adding something that we haven't actually defined , we now have an implicit row here.

[02:36 - 03:06] And because the largest item is our blue box which is set to be 20 pixels high, this row will automatically be 20 pixels high to conform to the tallest row item. CSS Grid also allows you to define gaps between your row and column tracks.

[03:07 - 03:20] The gap property will put margin only between the Grid items but not between the Grid items and the Grid container itself. This creates the much coveted gutter effect with a single line of CSS.

[03:21 - 03:36] In this example, the gutters are created by using one rem gap on the parent container. Now don't worry about the details of how Grid works because we'll go over Grid properties, much more detail in future lessons.

[03:37 - 03:55] Just for now, just focus on the fact that when you use display Grid, the Grid container replaces its child Grid items and rows and column tracks based on the properties that you set. Now just like CSS Grid, when you set the display property on an element to be flexed, the element becomes a flexed container.

[03:56 - 04:09] And only the direct children become flexed items. However unlike CSS Grid, CSS Flexbox only defines layouts in one track at a time.

[04:10 - 04:27] With Flexbox, you can layout items either in rows or columns, but not both at the same time. Now by default, Flexbox will put everything in a row, but you can change that by setting the Flex direction to column.

[04:28 - 04:41] Flexbox allows you to line items pretty easily. Flexbox lets you line items along the main axis, and the main axis is the one that the Flex direction is set to.

[04:42 - 04:52] And you can set that using the justify content property. Now you can also line items across the cross access, which is the opposite of the Flex direction access.

[04:53 - 05:17] And this is done by setting the align items property. In this example, we are setting the main axis to be flexed end, so all of our content is on the end, and the align items is set to center, so that way the content will center itself in the cross access.

[05:18 - 05:39] These accesses are then switched when the Flex direction is set to column like this. Now you can also center items really easily by just setting the line items or the justify content to be center.

[05:40 - 05:49] Now both Flexbox and Grid follow the rules of encapsulate CSS very well. They both only lay out their direct children, and not themselves.

[05:50 - 06:09] There are a few Flexbox and a few Grid properties that are set directly on the children themselves, such as Flexgrow and Grid column start. You can use the same pattern for these properties that we learned in the previous lesson, namely props and direct children's selectors.

[06:10 - 06:25] Flexbox and Grid have been given us some fantastic tools to build composable layouts. Now the final thing we need to do is reset the browser's user agent's style sheet to compose our layouts property, and we will learn how to do that in the next lesson.