CSS layout has grown and evolved into a robust set of tools to accomplish some fantastic modern layouts.
The problem is that we are still teaching CSS as something that is" hacked" together by using" tricks" to get our desired web layouts.
Learning CSS like this typically leads us down one of two paths: We either build fragile page layouts using 
the "see what sticks" method of CSS, or we give up and declare that CSS is too tricky and bring in an X column grid system like Twitter Bootstrap.

Creating page layouts in CSS doesn't have to be complicated. Like how you make much of your everyday speech using just a small 
subset of vocabulary composed together, you can achieve sophisticated layouts by composing simple low-level layout primitives in unique ways.

In this course, you will learn foundational layout primitives that you can use to build many of your more complex layouts. You will also learn 
how to apply the principle of "Encapsulated CSS" to both extend these primitives as well as to create custom layout primitives. To do this, we 
will recreate many of the layouts found in the wild using the principles mentioned above.

This course does not require extensive knowledge of CSS. It does assume that you have a basic understanding of the CSS box model, CSS specificity, 
CSS selectors, and CSS sizing units. Though you can apply the principles in this course to any modern web framework, including no framework 
development, this course will be using React and assume you have a basic understanding of React, JSX, and React hooks.

Composing Layout in React is for both novice and experienced developers who want to take their layout skills to the next level. This course will 
teach you the practical skills you need to build modern layouts for the web without depending on heavy CSS frameworks. Unlike courses and blog 
posts that teach each layout property in isolation, our product teaches practical layout patterns that you can use every day when solving your 
layout challenges.

In this course we show you how to build complex layouts in React by composing just a few foundational layout primitives.
Along the way you will learn modern CSS Layout tools like Normal Flow, Flexbox, and Grid.

Composing Layouts in React

---
title: CSS Grid vs Flexbox for Composable Layouts
slug: composable-flexbox-grid
description: 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.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/tsv4zfinyy
useMdx: true
---

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."

```jsx { actualFilename=./protected/grid-example.jsx endLine=15 startLine=8 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_02/lesson_02.04/protected/grid-example.jsx#L8 }
    //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:

```jsx { actualFilename=./protected/grid-example.jsx endLine=34 startLine=21 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_02/lesson_02.04/protected/grid-example.jsx#L21 }
    <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:

![Example of grid tracks](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_02/lesson_02.04/public/assets/grid-example.png)

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.

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.