The details shared here apply to the most recent versions of our themes. To keep your theme up to date, check out this helpful document.
When using HTML to build column divisions, you can control when a new row of column divisions should start by including the word "alpha" (the first letter of the Greek alphabet and synonymous with "beginning") within the opening <div> tag’s class names:
<div class="eight columns alpha">
If you want to "end" a row of column divisions before the full sixteen based columns have been covered, you can add the class name "omega." The word "omega" is the last letter of the Greek alphabet and means "end":
<div class="eight columns omega">
We recommend adding "alpha" and "omega" after the word "columns."
Adding both "alpha" and "omega" to a single class name will likely cause undesirable results.
Even if all 16 base columns are used, it is still recommended that you include the "omega" class name for both consistency and so that the code understands that you’re beginning a new row. This can also be important for responsive layouts for mobile phones and tablets.
Also keep in mind it’s not necessary to use all sixteen base columns in a single row. Just be sure to include the "omega" class name in your last column division to create a "line break" of sorts.
For a shortcut to creating multiple columns with HTML check out the Out of the Sandbox Content Creator Extension for Google Chrome: