Foundation CSS Float Grid Advanced

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.  

Foundation CSS Float Grid Advanced classes:

Combined Column or Row: When you need just one column in a row. You can save yourself from a little hard work by combining the column and rowclasses together and that will generate only one column in one row. 

• row: This class is used to contain all the content/columns that will be in a row.
• column: This class is used to signify the individual columns inside a row.

Syntax:

<div class="column row">
 ...
</div>

Fluid Row: By default, the rows are 1200px wide. So using these rows on a wider screen is not the perfect option to choose. So we use the fluid row option and for that, we just need to add the expanded class with the rowclass.

• expanded: This class is added with the rowclass and it will enable the row to fill into the entire width.

Syntax:

<div class="expanded row">
 ...
</div>

Nesting: Float Grid provides us with an indefinite amount of nesting. This means that we can insert a row under a column, then again insert columns under that inserted row, and so on. This does not have any use of a specific class we just have to nest with basic float grid classes. 

Syntax:

<div class="row">
 <div class="columns">
 <div class="row">
 <div class="columns">
 <div class="row">
 <div class="columns">...</div>
 <div class="columns">...</div>
 </div>
 </div>
 </div>
 </div>
</div>

Offsets: We can add some space or move the column up to 11 blocks using this option. 

• large-offset-[1-11]: This class is used to add offset when the screen size is large.
• medium-offset-[1-11]: This class is used to add offset when the screen size is medium.
• small-offset-[1-11]: This class is used to add offset when the screen size is small.

Syntax:

<div class="row">
 <div class="columns large-offset-1">10, offset 1</div>
</div>

Example 1: The code below demonstrates the application of the combined column and row, fluid row, and nested rows. The combined column and row are expanded for wider screens.

Output:

👁 Image

Example 2: The code below demonstrates a different offset with 1, 2, or 3 column values.

Output:

👁 Image

Reference: https://get.foundation/sites/docs/grid.html#advanced