Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de sitios web, aplicaciones y correos electrónicos receptivos sorprendentes que parecen sorprendentes y pueden ser accesibles para cualquier dispositivo. En este artículo, discutiremos el contenedor de cuadrícula XY en Foundation CSS.
El contenedor de cuadrícula XY se utiliza para proporcionar el espacio horizontal disponible para el contenedor de cuadrícula. De forma predeterminada, el contenedor de cuadrícula ocupa todo el ancho disponible.
Clases de Foundation CSS XY Grid Container utilizadas:
- grid-container: Esta clase se usa para dar espacio horizontal disponible.
Sintaxis:
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell">...</div>
..........
</div>
</div>
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de Grids Container con la clase grid-container .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS XY Grid Container</title> <!-- 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> </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>
Producción:
Contenedor de cuadrícula XY de Foundation CSS
Ejemplo 2: a continuación se muestra el ejemplo que ilustra el uso de Grids Container sin la clase grid-container .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS XY Grid Container</title> <!-- 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> </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>
Producción:
Contenedor de cuadrícula XY de Foundation CSS
Referencia: https://get.foundation/sites/docs/xy-grid.html#grid-container