Video

Transcript

Welcome back to the Intro to Building series! I’m Shawn, and in this lesson, we’re diving into Row Blocks. We’ll explore gutters and column settings through flexbox principles to control both horizontal and vertical alignment of columns.

By default, gutters are enabled in Row Blocks, creating space between each column. With gutters on, each column has 0.5 rem of padding on all four sides, which adds up to a total of 1 rem of space between adjacent columns. If I turn the gutter setting off, you’ll see that the columns sit directly next to each other without any padding.

In Refoundry, we use padding to create these gutters instead of Flexbox’s gap property. While gaps are commonly used elsewhere in Refoundry, padding here provides better control for responsive design, keeping layouts consistent across screen sizes. This approach ensures that each column maintains its set width within a row without causing overflow, which can happen with fixed-width gaps.

Since gutters are created with padding, the background color of a column applies to the entire area, including the padding. For example, if I set a mid-blue background color, it will cover both the column and its padding. If I want a background element to stay within the inner area without extending into the gutter, I can nest a container inside each column. This lets me add a background within the inner area without touching the gutter, giving me flexibility to create more complex layouts without layout breakage.

Now, let’s dive into Flex Alignment, which controls how columns are positioned both vertically and horizontally within a row. In Refoundry, I’ll select the Row Block and open Flex Settings. By default, Flex Direction is set to Row, Justify is set to Start, and Align is set to Stretch.

With Flex Direction set to Row, Flex Align controls vertical alignment of columns. Stretch is the default, so columns will match the height of the tallest element in the row. Setting Flex Align to Start aligns columns at the top, which fits the columns to their content, creating an uneven border. Choosing End aligns columns at the bottom, while Center aligns them vertically in the center of the row.

Horizontally, Flex Justify controls how columns are aligned within the row. Start, the default, aligns columns on the left. End aligns them on the right, while Center centers them horizontally. Space Between distributes columns evenly across the row with equal space in between.

Flex Direction allows us to control the layout direction. The default is Row (horizontal), but we can set it to Column to stack columns vertically while respecting their widths. In this vertical arrangement, Flex Align and Flex Justify swap functions: Flex Align controls horizontal alignment, while Flex Justify handles vertical alignment.

We also have additional Flex Direction options. Column Reverse reverses the column order vertically, while Row Reverse does the same horizontally. You’ll notice icons here that allow us to set different rules for desktop, tablet, and phone views.

For instance, say I have a blue box (acting as an image) to the right of some text. On tablet view, I want these elements to stack full width with the image below the text. Column Reverse lets me control this layout by placing the image where I want it in relation to the text, offering great flexibility for responsive design.

And that’s the power of Row Blocks! By understanding and using gutters and flex alignment, you can create consistent, responsive layouts that look great on any device. In the next lesson, we’ll dive into Column Blocks to explore individual column settings.

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!