Open In App

Foundation CSS XY Grid Container

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is an open-source and 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 and can be accessible to any device. In this article, we will discuss the XY Grid Container in Foundation CSS.

The XY Grid Container is used to provide the horizontal space available for the grid container. By default, the grid container takes up the full available width.

Foundation CSS XY Grid Container classes used:

  • grid-container: This class is used to give available horizontal space.

Syntax:

<div class="grid-container">
  <div class="grid-x grid-margin-x">
    <div class="cell">...</div>
    ..........
  </div>
</div>

Example 1: Below is the example that illustrates the use of Grids Container with grid-container class.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Foundation CSS XY Grid Container</title>
    
  <!-- Compressed CSS -->
  <link rel="stylesheet"
        href=
  
  <!-- Compressed JavaScript -->
  <script src=
  </script>
</head>
  
<body>
  <center>
    <h1 style="color:green">
      GeeksforGeeks
    </h1>
  
    <h4>Foundation CSS XY Grid Container</h4>
      
    <div class="grid-container callout">
      <div class="grid-x grid-margin-x">
        <div class="cell small-4 callout">Geek-1</div>
        <div class="cell small-4 callout">Geek-2</div>
        <div class="cell small-4 callout">Geek-3</div>
      </div>
    </div>
  </center>
</body>
  
</html>


Output:

Foundation CSS XY Grid Container

Foundation CSS XY Grid Container

Example 2: Below is the example that illustrates the use of Grids Container without grid-container class.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Foundation CSS XY Grid Container</title>
  
  <!-- Compressed CSS -->
  <link rel="stylesheet" 
        href=
  
  <!-- Compressed JavaScript -->
  <script src=
  </script>
</head>
  
<body>
  <center>
    <h1 style="color:green">
      GeeksforGeeks
    </h1>
  
    <h4>Foundation CSS XY Grid Container</h4>
      
    <div class="grid-x grid-margin-x callout">
      <div class="cell small-4 callout">Geek-1</div>
      <div class="cell small-4 callout">Geek-2</div>
      <div class="cell small-4 callout">Geek-3</div>
    </div>
  </center>
</body>
  
</html>


Output:

Foundation CSS XY Grid Container

Foundation CSS XY Grid Container

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



Last Updated : 16 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads