CSS Flexbox and CSS Grid as Composable Layouts
You will learn the basics of CSS Flexbox and CSS Grid, especially which properties conform to the Encapsulated CSS principles and which ones do not.
Up until relatively recently, CSS technically only supported one form of layout: Normal Flow. Developers have been hacking around this for years using tables and floats, but this often had frustrating problems since you were using tools in a way that they weren't designed. Though it is very impressive what these early innovators were able to do, it required you to use a framework, like bootstrap or foundation, to lay out anything consistently on the web.
Luckily for us, this is no longer the case. CSS now has two layout options: CSS Grid and CSS Flexbox. In this lesson, we will be learning the basics of Grid and Flexbox and how to use them in a composable way.
CSS Grid basics#
When you set an element's
display property to
grid, it does two things. First, that element becomes a "grid container." Second, all the direct children, and only the direct children, become "grid items."
In the grid container element, you can define tracks of columns and rows. Column and row sizes can be defined either explicitly, or implicitly, by allowing Grid to determine their height or width. The browser then places the grid items in these tracks for us, flowing left to right and then top to bottom to fill up one row at a time.
We could write something like this:
And it would look like this:
In the above example, we have created two column tracks of width
100px and two row tracks of height
The first two items are placed in the two columns on the first row track, which we set to be
30px high based on the first value in the
gridTemplateRows property. The next two items are placed in the second row track, which we set as
200px high based on the second value in the
Finally, since there are no more explicit tracks defined after that, an implicit row is created for the next two items with an
auto height set as default. Since the tallest box in that row is
20px, the whole row will be
CSS Grid also allows you to define gaps between your row and column tracks. The
gap prop will put margin only between the grid items, but not between the grid items and the grid container itself. This creates the much-coveted gutters effect with a single line of CSS.