Column Sections

Learn how to create a simple two-column layout using Refoundry’s container, row, and column system. Adjust widths, apply styling, add spacing, and control full-width vs constrained layouts — all in just a few steps.

Last updated:

Description

In this tutorial, you’ll learn how to build a two-column layout in Refoundry using containers, rows, and columns, with proper spacing and width settings.

This tutorial will cover:

  • Creating a two-column layout
  • Adjusting column width and duplicating columns
  • Adding headlines and text to columns
  • Applying padding at the column and container level
  • Understanding max width vs full width for containers

By the end, you’ll understand the foundational structure behind most Refoundry layouts and how to build flexible sections in just a few minutes.

Suggested videos:

Flex Alignment

Reusable Component Block

Related resources:

Container Block | Refoundry

Row Block | Refoundry

Column Block | Refoundry

Spacing | Refoundry

Relate Resources

Keep exploring.

Explore more resources we’ve selected to help you dig deeper into topics that matter to your workflow.

Ready to take the next step?

Put your learning into action.

Whether you’re exploring on your own or want guided support, Refoundry makes it easy to start building smarter today.