Columns Layout System

A flexible and powerful column-based layout system built on top of flexbox for creating responsive designs with minimal effort.

Overview

The Columns system provides intuitive classes for creating column-based layouts that automatically respond to different screen sizes. It includes support for:

• Equal-width columns
• Variable width columns
• Column stacking on mobile
• Auto-sizing columns
• Responsive behavior across all breakpoints
• Configurable number of grid columns (default: 12)

Basic Usage

Create a row of equal-width columns using the .flex container with column children:

Column Sizing

Equal-Width Columns

Create columns that share the available space equally:

Fixed-Width Columns

Create columns with specific width proportions using the fill-* classes:

The fill-* classes represent a 12-column grid by default. The number of columns can be configured by changing the $column-count variable in your Sass configuration.

Class	Width	Description
.fill-1	8.33%	1/12 of container width
.fill-2	16.67%	1/6 of container width
.fill-3	25%	1/4 of container width
.fill-4	33.33%	1/3 of container width
.fill-6	50%	1/2 of container width
.fill-8	66.67%	2/3 of container width
.fill-9	75%	3/4 of container width
.fill-12	100%	Full container width

Mixed Column Widths

Combine fixed-width and auto-sized columns:

Creating Gutters (Column Spacing)

Just add gap-* classes to the row container to create gutters between columns. The gap size can be adjusted using the gap-* classes.

If you are to add nested columns with gaps; please note that you do need to reset the gap value for nested element as well.

Responsive Columns

Change column behavior across different screen sizes:

This example shows columns that:

• Stack vertically (100% width) on mobile
• Display 2-per-row on small screens
• Display 3-per-row on medium screens
• Display 4-per-row on large screens

Responsive Column Classes

Class	Description
.fill-6@sm	Takes up 50% width on small screens and up
.fill-4@md	Takes up 33.33% width on medium screens and up
.fill-3@lg	Takes up 25% width on large screens and up
.fill-2@xl	Takes up 16.67% width on extra large screens and up

Column Nesting

Create complex layouts by nesting columns:

Column Ordering

Change the visual order of columns without changing HTML structure:

Special Order Utilities

Class	Description
.order-first	Always appears first (order: -1)
.order-last	Always appears last (order: 9999)
.order-none	Uses default ordering (order: 0)

Column Alignment

Horizontal Alignment

Control how columns align horizontally:

Vertical Alignment

Control how columns align vertically:

Common Layout Patterns

Main Content with Sidebar

Responsive Three-Column Layout

Feature List with Unequal Columns

Combining with Other Utilities

Columns with Borders and Padding

Configuring Column Count

The column system is based on a configurable column count. By default, it uses 12 columns, but you can change this in your Sass configuration:

This will affect the width calculations for all fill-* classes, allowing more precise control over layout proportions.

SASS Mixins

Use these mixins in your Sass files for even more control:

Mixin	Description	Example
flex	Creates a flex container	@include flex;
row	Sets flex direction to row	@include row;
col	Sets flex direction to column	@include col;
fill($n)	Makes element fill n/12 columns	@include fill(6);
fill-full	Makes element take full width	@include fill-full;
grow	Makes element grow to fill space	@include grow;
no-shrink	Prevents element from shrinking	@include no-shrink;
center	Centers flex items on main axis	@include center;
x-center	Centers flex items on cross axis	@include x-center;

Example using mixins:

Best Practices

Do

• Use padding inside columns for proper spacing
• Combine fill-* classes with responsive modifiers for adaptive layouts
• Use semantic class names in combination with utility classes for maintainability
• Consider using the grid system for complex two-dimensional layouts

Avoid

• Overly complex nesting that makes responsive behavior hard to predict
• Mixing too many different column widths in a single row
• Relying solely on column order for critical content organization