This video is available to students only

Columns and Column Component

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.

Bootstrap and other CSS frameworks were revolutionary. They perfected the X column grid system 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

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:

And we have already seen that it looks like this:

Complex Form step 0

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:

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:

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

Which creates this layout effect:

Complex Form step 0.5

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.

 

This page is a preview of Composing Layouts in React

Start a new discussion. All notification go to the author.