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>