Foundation CSS XY Vertical Grids

Foundation CSS is an open-source and responsive front-end framework. It is built by ZURB foundation in September 2011. It makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the XY Vertical Grid in Foundation CSS.

The XY Vertical Grid is used to shift the internal cells automatically to vertical direction rather than horizontal direction.

XY Vertical Grids classes:

grid-y: It is used to provide vertical grids.
grid-margin-y: It is used to provide margin along the y-axis.
grid-padding-y: It is used to provide padding along the y-axis.

Syntax:

<div grid-y grid-padding-y ||
	 grid-margin-y" 
	 style="height: 400px;">
     .........
</div>

Example 1: Below is the example that illustrates the use of Vertical Grids gutters with grid-margin-y class.

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Compressed CSS -->
  <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">

  <!-- Compressed JavaScript -->
  <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
  </script>

  <style>
    body {
        padding: 50px;
    }

    .grid-x{
        background-color: rgb(236, 215, 20);
    }

    .customClass1 {
        background-color: rgb(31, 214, 31);
        line-height: 50px;
        color: white;
    }

    .customClass2 {
        background-color: rgb(18, 116, 18);
        line-height: 50px;
        color: white;
    }
  </style>
</head>

<body>
  <h1 style=" text-align:center; color:#009900">
      Cplusplus.in
  </h1>

  <div class="grid-y grid-margin-y" style="height: 400px;">
    <div class="cell customClass1 small-6 medium-8 large-2">
      cell with small-6 medium-8 large-2
    </div>

    <div class="cell customClass2 small-6 medium-4 large-10">
      cell with small-6 medium-4 large-10
    </div>
  </div>
</body>

</html>

Output:

Example 2: Below is the example that illustrates the use of Vertical Grids gutters with grid-padding-y class.

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Compressed CSS -->
  <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">

  <!-- Compressed JavaScript -->
  <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
  </script>

  <style>
    body {
        padding: 50px;
    }

    .grid-x{
        background-color: rgb(236, 215, 20);
    }

    .customClass1 {
        background-color: rgb(31, 214, 31);
        line-height: 50px;
        color: white;
    }

    .customClass2 {
        background-color: rgb(18, 116, 18);
        line-height: 50px;
        color: white;
    }
  </style>
</head>

<body>
  <h1 style=" text-align:center; color:#009900">
      Cplusplus.in
  </h1>

  <div class="grid-y grid-padding-y" style="height: 400px;">
    <div class="cell customClass1 small-6 medium-8 large-2">
      cell with small-6 medium-8 large-2
    </div>

    <div class="cell customClass2 small-6 medium-4 large-10">
      cell with small-6 medium-4 large-10
    </div>
  </div>
</body>

</html>

Output:

Reference link: https://get.foundation/sites/docs/xy-grid.html#vertical-grids