Foundation CSS XY Grid Frame

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing & can be accessible to any device. 

In this article, we will discuss the XY Grid Frame in Foundation CSS.

The XY grid consolidates the grid frame from Apps to many a lot of useful features. To use XY grid frame just add .grid-frameto your HTML grid. It will set the grid to cover the full height of the browser window i.e. 100vh.

XY Grid Frame class:

• grid-frame: This class helps us to pin the height of the grid. If you put this class in the outer grid then it will take the height of the port and if you use it in the nested grid then it will take the height of the container.

Syntax:

 <div class="grid-frame">
 ... 
 </div>

Below are the examples that illustrate the use of XY Grid Frame classes:

Example 1: This example illustrates the use of the .grid-frame class for text.

Output:

👁 Image

Example 2: This example illustrates the use of .grid-frame class for images.

Output:

👁 Image

Reference: https://get.foundation/sites/docs/xy-grid.html#grid-frame