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."
//grid-container
<div style={{ display: "grid" }}>
<div /> {/* grid-item */}
<div>
<div /> {/* not a grid-item */}
<div /> {/* not a grid-item */}
</div>
</div>
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:
<div
style={{
display: "grid",
gridTemplateColumns: "30px 100px",
gridTemplateRows: "30px 200px",
}}
>
<Box color="red" /> {/* 30 X 30 */}
<Box color="orange" /> {/* 30 X 100 */}
<Box color="yellow" /> {/* 200 X 30 */}
<Box color="green" /> {/* 200 X 100 */}
<Box color="teal" /> {/* auto X 30 */}
<Box style={{ height: "20px" }} color="blue" /> {/* auto X 100 */}
</div>
And it would look like this:

In the above example, we have created two column tracks of width 30px
and 100px
and two row tracks of height 30px
and 200px
.
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 gridTemplateRows
property.
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 20px
.
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.
<div
style={{
display: "grid",
gap: "1rem",
gridTemplateColumns: "1fr 1fr 1fr",
border: "1px solid #4c6ef5",
}}
>
<GridItem />
<GridItem />
<GridItem />
<GridItem />
<GridItem />
<GridItem />
<GridItem />
<GridItem />
<GridItem />
</div>
This page is a preview of Composing Layouts in React