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: How to Build React Grid Layouts With Custom Column Numbers
slug: columns-and-column
description: Having a column-based grid system to lay our elements out on is very useful, which is why Bootstrap and other CSS frameworks are built on that model.  In this lesson, you will learn how to build the Columns primitive and its helper the Column to build your custom column layout.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/ggw9t9ntrl
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/travis-waith-mair-composing-layout-in-react-app/-/tree/main/module_03/lesson_03
---

Bootstrap and other CSS frameworks were revolutionary. [They perfected the X column grid system](https://getbootstrap.com/docs/4.0/layout/grid/) to create layouts by doing a little math. Although we are (fortunately) no longer dependent on these X column grid systems as our universal layout, it is still a helpful way to lay out items. However, with the Columns primitive, we are no longer bound by 12- or 24-column systems. Instead, we can set five columns, or 13 columns, or any other number we need.

## The problem: the Complex Form

In this lesson, we are going to build out the form part of the previous widget:

![Complex Form](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.03/public/assets/columns-red-line.png)

Similar to the Split and Stack components, we need consistent gutters. This time we will need to apply them between both the column tracks and the row tracks. In addition to this, we need to lay the input fields across multiple column tracks.

## The solution

Let's start with our basic markup, and as always [you can follow along by forking this codesandbox.io starter](https://codesandbox.io/s/columns-and-column-example-starter-1ibo9?file=/src/Form.jsx):

```jsx { actualFilename=./protected/columns-0.js endLine=36 startLine=4 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_03/lesson_03.03/protected/columns-0.js#L4 }
export default function Form() {
  return (
    <div>
      <FormGroup htmlFor="firstName" label="First Name">
        <input type="text" id="firstName" />
      </FormGroup>

      <FormGroup htmlFor="lastName" label="Last Name">
        <input type="text" id="lastName" />
      </FormGroup>

      <FormGroup htmlFor="email" label="Email">
        <input type="text" id="email" />
      </FormGroup>

      <FormGroup htmlFor="address" label="Street Address">
        <input type="text" id="address" />
      </FormGroup>

      <FormGroup htmlFor="city" label="City">
        <input type="text" id="city" />
      </FormGroup>

      <FormGroup htmlFor="state" label="State">
        <input type="text" id="state" />
      </FormGroup>

      <FormGroup htmlFor="zipCode" label="Zip Code">
        <input type="text" id="zipCode" />
      </FormGroup>
    </div>
  );
}
```

And we have already seen that it looks like this:

![Complex Form step 0](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.03/public/assets/columns-0.png)

In the previous lesson, we learned that we could create column tracks simply through the number of values provided. Our Split component only used two column tracks, and therefore it was pretty easy to read. But what if we wanted to have six columns, or 18 columns of equal width? We could repeat `1fr` 18 times, but luckily for us, a helper function was created to make this easier.

The CSS Grid specification includes a `repeat` function. This function allows you to repeat a sequence a specified number of times. For example, to create 18 column tracks, we write:

```css
grid-template-columns: repeat(18, 1fr);
```

And this will create 18 column tracks. It is important to recognize that it will repeat any sequence of values. You could create six column tracks that alternate between `100px` and `200px` like this:

```css
grid-template-columns: repeat(3, 100px 200px);
```

To create our six column tracks, we can write our **Columns** primitive like this:

```jsx { actualFilename=./protected/columns-1.js endLine=12 startLine=7 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_03/lesson_03.03/protected/columns-1.js#L7 }
const Columns = styled.div`
  display: grid;
  gap: ${(props) =>
    spacingMap[props.gutter] ? spacingMap[props.gutter] : spacingMap.lg};
  grid-template-columns: repeat(6, 1fr);
`;
```

Which creates this layout effect:

![Complex Form step 0.5](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_03/lesson_03.03/public/assets/columns-0.5.png)

The next challenge we need to solve is getting our input fields to span multiple column tracks. To achieve this, we are going to make another helper primitive: the **Column**. In CSS Grid, there is a property that defines how a grid-item interacts with the columns. This grid property is called `grid-column`.

You can get a full definition of [what grid-column can do over at MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column), but for our purposes we can assign it the number of columns that we want it to span like this:

```jsx { actualFilename=./protected/columns-1.js endLine=16 startLine=14 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_03/lesson_03.03/protected/columns-1.js#L14 }
const Column = styled.div`
  grid-column: span 3;
`;
```

This Column primitive can now be used to wrap any of the children of our Columns component to allow it to span more than one column, like this:

```jsx { actualFilename=./protected/columns-1.js endLine=60 startLine=18 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_03/lesson_03.03/protected/columns-1.js#L18 }
export default function Form() {
  return (
    <Columns>
      <Column>
        <FormGroup htmlFor="firstName" label="First Name">
          <input type="text" id="firstName" />
        </FormGroup>
      </Column>

Having a column-based grid system to lay our elements out on is very useful, which is why Bootstrap and other CSS frameworks are built on that model.  In this lesson, you will learn how to build the Columns primitive and its helper the Column to build your custom column layout.