Grids

Throughout this article, we'll build on the pieces you'll put together to create columns using the Front Street grid system and how to overcome various real-world layout problems. Our grid system uses Flexbox CSS to create fluid layout columns. And we include classes for both a 10-column and 12-column grid system to give you the ultimate flexibility in building the different layouts within your website.

1. General Overview
2. Responsiveness
3. Column Widths
4. Row Containers
5. No Gutters
6. Nested Columns
7. Columns With Backgrounds
8. Column Alignment
9. Column Ordering
10. Column Offsetting

General Overview

There are three basic steps to remember when setting up a row of columns — Rows, columns and content.

1. Rows: Create a wrapping element with class row.
2. Columns: Add your column elements directly within. Each column should have class col followed by a class to determine its responsive breakpoint and width formatted like col-{breakpoint}-{size}.
3. Content: Within each column, we'll add an element with class wrap, which will contain the content.

    

        

            ...
        
    
    ...

Auto-Sizing, Equal-Width Columns

When not including a specifc column size, all .col-{breakpoint} elements will automatically adjust to be equal width, depending on the number of columns. Below is a basic example of a single row of three, equal-width columns. Each .col element has class col-md added to it, meaning they will be equal in width and stack responsively below the md breakpoint.

    

        

            ...
        
    
    

        

            ...
        
    
    

        

            ...
        
    

Specifying Column Widths

For a row with columns varying in width, you can construct your column classes like col-{breakpoint}-{size}. See column widths for more on sizing using the 10-column and 12-column grid systems.

In the following example, we have two columns sized at 4/12 and 8/12, which will responsively stack when the viewport is less than the md breakpoint.

    

        

            ...
        
    
    

        

            ...
        
    

Multiple Rows

Multiple rows of columns can simply be stacked one after the next, as well. Separating multiple rows into separate .row elements is necessary primarily because the .row element is what will space the columns vertically from each other. And additionally in the following scenario, it's necessary also because our first row is using auto-sizing .col-md elements that are intended to be 1/3 each.

    

        

            ...
        
    
    

        

            ...
        
    
    

        

            ...
        
    



    

        

            ...
        
    
    

        

            ...
        
    

Responsiveness

When setting up any grid, it's important to decide what viewport you want those columns to collapse at (i.e. stack). To do this, you'll pick either xs, sm, md, or lg, to use within your grid classes.

Column Widths

Something fairly unique to Front Street is that we provide a 10-column grid system that can be used throughout your website in conjunction with the standard 12-column grid system. Our goal with this is to give you more flexbility in your column widths.

12-Column Grid

When grouping classes in a 12-column grid system, you want to make sure the integers all add up to 12.

10-Column Grid

To separate this 10-column grid system, the column integers used in the classes are formatted like 010, 020, 030, 040, etc. However, conceptually everything is still the same; you'll want the integers to add up to 10. Below are a few examples.

Mixing Columns Widths

Even with fluid columns, we sometimes face real-world layout issues with columns being the same widths across all viewports, before their stacking point.

For example, let's say our website's layout is three columns — A middle content column surrounded by two sidebars. On really large desktops we don't want gigantic sidebars. However, the issue is that once we reach a bit smaller desktop, our sidebars then become too narrow. This is where mixing column classes intended for different viewports can come in handy.

The following example has our three-column layout, with the columns setup for the xl breakpoint and above, distributed as 3/12 - 6/12 - 3/12.

    

        

            ...
        
    
    

        

            ...
        
    
    

        

            ...
        
    

And now we can see that the above example's columns will display how we want when the viewport is 1200px or larger, but then simply stack responsively below that.

So now let's build on our above example and add a new set of classes to adjust the widths to be distributed evenly (i.e. three equal-width columns) when at the lg and md viewport sizes.

    

        

            ...
        
    
    

        

            ...
        
    
    

        

            ...
        
    

Row Containers

By default your columns have gutters to separate their content from each other. And in order for the content of your first and last columns to sit flush against the edge of the row, the .row elements have negative margin on the sides.

In some circustances, this can cause layout issues (like unwanted horizontal mobile scrolling, for example) depending on what's wrapping your columns. So while completely optional and only necessary if needed, .row-container elements can be used to fix this.

Consider the following example with a standard row of three columns, where you can see the negative margins of the row pushing the content flush against the sides of the container.

    ...

But if we wanted to the outer edge of our row to sit naturally without any negative margin, we can wrap it in an element with class row-container.

    

        ...
    

No Gutters

By default, columns have padding on the sides that we call gutters, and then as we discussed in the previous section, the wrapping .row element has equal negative margin on the sides to allow the content within columns to appear flush against. By adding the no-gutters class to a .row element, you can remove all column gutters along with the negative margin on the row meant to counteract the first and last gutters.

The example below has two matching rows, with the second row having the row-no-gutters class applied.

    ...



    ...

Nested Columns

You can also nest rows of columns within columns. Here's an example using automatic, equal-width columns.

    

        


            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum vulputate dignissim. Integer suscipit lacinia fringilla.

            

                

                    

                        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum vulputate dignissim. Integer suscipit lacinia fringilla.
                    

                

                

                    

                        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum vulputate dignissim. Integer suscipit lacinia fringilla.
                    

                

            


        

    


    

        

            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum vulputate dignissim. Integer suscipit lacinia fringilla.
            
Mauris tempus convallis lectus, placerat hendrerit ligula auctor id. Donec sodales ultrices leo, vel tempor libero. Donec maximus faucibus scelerisque.
            
Maecenas pharetra augue risus, eu pretium arcu rhoncus eget.
        

    

Columns With Backgrounds

By default, columns are styled for raw content within to be laid out nicely. But when adding background colors to your columns, this will generally change the desired layout.

Consider the following example. — We've got a basic row of three columns and have simply added classes from the color library to give .wrap content elements background colors.

    

        

            ...
        
    
    

        

            ...
        
    
    

        

            ...
        
    

The first issue we see in the above example is that now our content elements don't have enough padding because of the background colors added.

So next we can add the class has-bg to our columns, which will add padding to the .wrap elements within.

    

        

            ...
        
    
    

        

            ...
        
    
    

        

            ...
        
    

This will also go nicely with the row-no-gutters class discussed above.

    

        

            ...
        
    
    

        

            ...
        
    
    

        

            ...
        
    

And earlier we said that if you need spacing between each row, that you should separate your columns into separate .row elements. However, a gutterless grid with background colors might be a great example not to do that.

So, the following example takes nine columns all specified to be 4/12, but contained in the same .row element.

    

        

            ...
        
    
    

        

            ...
        
    
    

        

            ...
        
    
    

        

            ...
        
    
    

        

            ...
        
    
    

        

            ...
        
    
    

        

            ...
        
    
    

        

            ...
        
    
    

        

            ...
        
    

Can I mix and match? — Sure! Not every column in a row needs a background color. Below is an example where we just want the second column to have a background color, and so only the second column will need the has-bg helper class.

    

        

            ...
        
    
    

        

            ...
        
    

Alignment

Utilizing the power of Flexbox CSS, we can provide several helpful classes for aligning columns in a grid.

Vertical Alignment

By default columns will stretch vertically to fill the height of their row.

To align your columns vertically to the top of a row, you can add class row-align-top to the wrapping .row element.

    ...

To align your columns vertically to the middle of a row, you can add class row-align-middle to the wrapping .row element.

    ...

To align your columns vertically to the bottom of a row, you can add class row-align-bottom to the wrapping .row element.

    ...

You can also align individual columns within a row, by adding the col-align-top, col-align-middle, and col-align-bottom classes to the individual columns.

    

        

            ...
        
    
    

        

            ...
        
    
    

        

            ...
        
    

Horizontal Alignment

By default columns will be aligned to the start of their row.

To align your columns horizontally to the end of a row, you can add class row-align-end to the wrapping .row element.

    ...

To align your columns horizontally to the center of a row, you can add class row-align-center to the wrapping .row element.

    ...

You can also align individual columns within a row, by adding the col-align-start, col-align-center, and col-align-end classes to the individual columns instead of the wrapping row.

    

        

            ...
        
    
    

        

            ...
        
    
    

        

            ...
        
    

Combining Horizontal and Vertical Alignment

And of course, we can combine vertical and horizontal alignment classes.

For example, combining row-align-center and row-align-middle can help us to achieve a common scenario of placing a column perfectly centered within a row that's been given a specific height larger than the column, itself.

    

        

            ...
        
    

And for fun, below is a less practical example, but just showing how we can apply this concept to indvidual columns within.

    

        

            ...
        
    
    

        

            ...
        
    

Distribution

When your columns don't all add up to 100%, you can evenly distribute the space around them by adding class row-space-around to the .row element.

    ...

And similarly, you can evenly distribute the space around, but with the first and last columns against the row edges, by adding class row-space-between to the .row element.

    ...

Alignment Overview

Column Ordering

Keeping a mobile-first approach in mind, column ordering classes can be very useful. Your HTML markup will be naturally ordered for the mobile view, but then by adding ordering classes you can adjust the display order on larger viewports where your columns are laid out.

A really common dilemma column ordering solves is with laying out the content and sidebars of a website. — For example, if you have a layout with a left sidebar and main content area, you don't want (1) your mobile users seeing that left sidebar at the top, before your main content and (2) Google reading that sidebar first in your HTML markup. So this can be solved by outputting your primary content column first, but then using ordering classes to display the sidebar on the left at the larger, specified viewport.

Reverse Order

To reverse the order of all columns in a row, use one of the row-{breakpoint}-reverse classes on your .row element.

    

        

            First
        
    
    

        

            Second
        
    
    

        

            Third
        
    

First and Last

To bump a single column into the first position of a row, add class col-{breakpoint}-order-first to the column.

    

        

            First
        
    
    

        

            Second
        
    
    

        

            Third
        
    

And similarly, to bump a single column into the last position of a row, add class col-{breakpoint}-order-last to the column.

    

        

            First
        
    
    

        

            Second
        
    
    

        

            Third
        
    

Ordering Overview

Column Offsetting

Move columns inward using .col-{breakpoint}-offset-{size} classes. These classes increase the left margin of a column by specified number of columns. For example, adding the class col-md-offset-4 to a column element moves it over four columns.