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 la cuadrícula vertical XY en Foundation CSS.
La cuadrícula vertical XY se utiliza para cambiar las celdas internas automáticamente a una dirección vertical en lugar de una dirección horizontal.
Clases de cuadrículas verticales Foundation CSS XY:
- grid-y: esta clase se usa para generar cuadrículas verticales.
Sintaxis:
<div grid-y style="height: 500px;">
<div class="cell small-n medium-n large-n">
...
</div>
...
</div>
Nota: Aquí n es el número positivo entre 1 y 12 para definir el tamaño de la cuadrícula.
Ejemplo 1: A continuación se muestra el ejemplo que ilustra el uso de cuadrículas verticales.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS XY Vertical Grids</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> <h5>Foundation CSS XY Vertical Grids</h5> <div class="grid-y" style="height: 500px;"> <div class="cell small-6 medium-8 large-2 callout"> cell with small-6 medium-8 large-2 </div> <div class="cell small-6 medium-4 large-10 callout"> cell with small-6 medium-4 large-10 </div> </div> </center> </body> </html>
Producción:
Base CSS XY Cuadrículas verticales
Ejemplo 2: a continuación se muestra otro ejemplo que ilustra el uso de cuadrículas verticales.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS XY Vertical Grids</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=" text-align:center; color:green"> GeeksforGeeks </h1> <h5>Foundation CSS XY Vertical Grids</h5> <div class="grid-y" style="height: 500px;"> <div class="cell callout small-8 medium-4 large-9"> cell with small-8 medium-4 large-9 </div> <div class="cell callout small-4 medium-8 large-3"> cell with small-4 medium-8 large-3 </div> </div> </center> </body> </html>
Producción:
Base CSS XY Cuadrículas verticales
Referencia: https://get.foundation/sites/docs/xy-grid.html#vertical-grids