What is a Gutter?
In the context of Refoundry, a Gutter refers to the spacing between Column Blocks within a Row Block or a Query Post Template Block. The Gutter setting, available only on these blocks, ensures that there is adequate space between columns, creating a clean, organized layout. This spacing helps to prevent content from feeling cramped and maintains a visually appealing design across different screen sizes.
How it Works
The gutter setting is a crucial aspect of layout management within Row Blocks and Query Post Template Blocks. It controls the spacing between columns, ensuring that your content is neatly arranged and visually balanced. Refoundry’s Gutter settings utilize Padding rather than Flexbox’s gap property, to maintain consistent column widths and avoid layout issues like overflow.
When the Gutter is enabled (this is the default value), it creates a uniform 1 rem of space between columns using a carefully calculated application of padding:
Containers: Padding of 0.5 rem is automatically applied to the left and right sides of containers. This ensures that the content within the container is not flush against the edges, providing some breathing room.
Rows: Row Blocks do not receive any padding directly. Instead, the padding is managed at the container and column levels, which allows for precise control of spacing without affecting the overall layout.
Columns: Each Column Block within the row receives 0.5 rem of padding on all four sides. This padding creates a buffer between adjacent columns. When two columns are placed side by side, the padding on their adjacent sides adds up to 1 rem of space between them. This method ensures that the spacing between columns is consistent and uniform throughout the design, maintaining a clean and organized appearance.
Disabling the gutter removes the default spacing, making the columns sit directly next to each other without any padding in between:
Padding Offset: When the gutter is disabled, a -0.5 rem padding is applied to the Row Block. This negative padding offsets the 0.5 rem padding that is applied by default to the container, effectively canceling it out. This adjustment ensures that the content within the columns can extend to the full width of the row without any additional spacing.
Padding Removal: The 0.5 rem padding that is normally applied to each Column Block is also removed. This results in the columns being directly adjacent to each other, with no space in between. This configuration is often used in designs where a tighter, more compact layout is desired, or where spacing is managed in other ways, such as through margin settings or specific design elements.
Why Padding is Used Instead of Flexbox “Gap”
Refoundry opts to use Padding rather than Flexbox’s gap properties for several important reasons, primarily related to maintaining consistent column widths and avoiding layout overflow issues.
Consistent Column Widths: Flexbox’s gap property introduces additional space between columns, which can impact the total width of the columns plus the gap. This can cause columns to exceed the container’s width, leading to overflow and disrupting the intended layout. For example, if two columns are set to 50% width and a 1 rem gap is applied, the total width becomes 100% + 1 rem, resulting in an overflow beyond the container’s bounds.
Padding as a Solution: Padding, on the other hand, is applied inside the columns, so it does not impact the width percentages assigned to the columns. The columns still respect their assigned widths (e.g., 50% for each column in a two-column layout), and the padding ensures that the spacing between them is consistent without adding to the overall width. This approach avoids overflow issues and ensures that the layout remains intact across various screen sizes.
Responsive Design: The use of Padding ensures that the layout remains consistent and responsive, with columns maintaining their proportions and spacing across different devices and screen sizes. This approach is particularly beneficial in creating designs that adapt seamlessly from desktop to mobile views.
Visual Consistency: By managing spacing through Padding, Refoundry ensures that the visual spacing between elements is consistent, which is critical for maintaining a polished and professional appearance in your designs.
Flexible Layouts: Designers have the flexibility to enable or disable gutters depending on the specific needs of the layout, allowing for both tightly packed designs and more spacious layouts as required.
