Columns

If you want or need to make columns, use the Foundation Grid. You don’t need any non-Foundation classes or floating styles when using the Grid.

Don’t use the sizing classes size-percent-50 or size-percent-25. These classes are for sizing images and creating captions, and will italicize the text. Also, columns with these classes won’t float next to each other because they have margin and padding.

Development info

  • Learn more about making Foundation columns using the Grid on Spaces
  • There isn’t currently a way to add columns in the WordPress editor without accessing the source code
  • Don’t make more than two (and definitely not more than three) columns, except in special cases
  • small-x should pretty much always be small-12 (100% width)
  • If you see class="col" and class="col2", don’t panic. These are the old, pre-Foundation columns, and we’re phasing them out.

Styling

Columns don’t have any decoration (border, background, etc.), but allow for text and other components to display side by side across the screen.

Responsive behavior

Columns resize based on which Foundation classes you give them. For example, you could have 2 columns on large and medium screens, which resize to 1 column on small screens (this is the most common scenario).

Columns example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra turpis at malesuada malesuada. Vestibulum tempor, turpis a sagittis commodo, arcu urna fermentum lectus, non ullamcorper.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetra turpis at malesuada malesuada. Vestibulum tempor, turpis a sagittis commodo, arcu urna fermentum lectus, non ullamcorper.