Video

Transcript

Hi everyone, welcome back to the Intro to Building series. I’m Shawn, and in this lesson, we’re diving into the Column Block, the final foundational layer in the Container-Row-Column structure of Refoundry layouts.

In the Row lesson, we introduced how column widths function, but here, we’ll go deeper into how columns give you precise control over layout, spacing, and alignment. In Refoundry, Columns combine the styling and grouping abilities of a Container Block with the flexibility to manage the layout of contained elements, much like a Row Block.

You can only add a Column Block inside a Row Block. To illustrate, if you try to add a Column Block outside a Row, it simply won’t appear. But if we add it within a Row Block, you’ll see it shows up as expected.

By default, each Column is set to a width of 12 units. Refoundry uses a 12-column grid system, which allows you to set column widths from 1 to 12 units, creating flexible layouts. If the widths of columns in a row add up to more than 12, any excess columns automatically move to a new row. For instance, I’ll set this column to 8, and if I add another column, it moves down to start a new row. This flexibility means you don’t always need an additional Row Block for each row of columns.

This setup also allows us to adjust columns differently at various breakpoints without adding extra rows. For example, I’ll set this column to 4 units, give it a color to make it visible, duplicate it with different colors, and continue duplicating to show how columns automatically wrap to new rows once the 12-unit width limit is exceeded.

Now, let’s add some content blocks to illustrate alignment and padding. I’ll place a heading, some text, and a button inside one of the columns, and style them so they’re easy to see.

Columns have padding settings that let you add inner spacing. For example, if we want more room between the content and the edge of the column, we can adjust the padding here. This feature helps control the spacing of any objects within a column, whether it’s a nested container or other blocks.

Next, let’s explore Flex Alignment. Column Blocks offer the same Flex controls as Row Blocks. I’ll set this column to Flex and change the Flex Direction to “column,” aligning elements vertically. The default alignment is Stretch, which makes elements take up the full height, but we can also align items to the start, center, or end of the column. To demonstrate, if I increase this column’s height, you’ll see that the elements adjust accordingly.

We also have options like Row Reverse and Column Reverse, as well as the Start, Center, End, and Space Between alignments, which work similarly to Row alignment options. For instance, Space Between distributes items equally within the column space.

Just like with Rows, we can set these Flex settings by device. If I want these items centered on mobile, I’ll adjust the display to Flex, set the Flex Direction to Column, and align items to the center for mobile screens.

That wraps up our introduction to the Column Block. With an understanding of the 12-column grid, inner padding for spacing, and Flex controls for alignment, you’re now equipped to use these core tools to create layouts as complex as you need.

If you have any questions or want to learn more, feel free to reach out through our website or book a demo. Happy building, and see you in the next lesson!