Category: Recipes

Back to Docs

Navigation

Column Recipes

@columns

Expands the code for creating responsive, text-flow columns. This is best used on a rich text element.

  • --col-count: The number of desired columns
  • --col-min-width: The minimum width a column can be before it stacks
  • --col-rule-style: The style of the ruler between columns (solid, dotted, dashed, etc.)
  • --col-rule-width: The thickness of the ruler between columns
  • --col-rule-color: The color of the ruler between columns
  • --col-gap: The gap between columns
  • --row-gap: The gap between “rows” (added as margin to the child elements).