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 increíbles y pueden ser accesibles para cualquier dispositivo.
En este artículo, discutiremos la cuadrícula de bloques XY en Foundation CSS. . [size]-up-[n] class grid-x ya que no funciona para cuadrículas verticales. Aquí ‘n’ representa el tamaño’ representa
- [tamaño]-up-[n]: esta clase crea una cuadrícula de bloque en cada punto de interrupción de tamaño y en n número de celdas.
<div class="grid-x grid-padding-x
[size]-up-[n]">
.........
</div>
Ejemplo 1: Este ejemplo ilustra el uso de las cuadrículas de bloques XY mediante las clases grid-margin-x, small-up-2, medium-up-4 y large-up-6 .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS XY Block 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 style="margin-inline: 10rem;"> <center> <h1 style="color: green"> GeeksforGeeks </h1> <h3>Foundation CSS XY Block Grids </h3> <div class="callout warning grid-x grid-margin-x small-up-2 medium-up-4 large-up-6"> <div class="cell callout">gfg</div> <div class="cell callout">gfg</div> <div class="cell callout">gfg</div> <div class="cell callout">gfg</div> <div class="cell callout">gfg</div> <div class="cell callout">gfg</div> <div class="cell callout">gfg</div> </div> </center> </body> </html>
Producción:
Ejemplo 2: Este ejemplo ilustra el uso de cuadrículas de bloques XY utilizando las clases grid-padding-x, small-up-1, medium-up-3 y large-up-5 .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS XY Block 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 style="margin-inline: 10rem;"> <center> <h1 style="color: green"> GeeksforGeeks </h1> <h3>Foundation CSS XY Block Grids </h3> <div class="callout warning grid-x grid-padding-x small-up-1 medium-up-3 large-up-5"> <div class="cell callout">gfg</div> <div class="cell callout">gfg</div> <div class="cell callout">gfg</div> <div class="cell callout">gfg</div> <div class="cell callout">gfg</div> </div> </center> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/xy-grid.html#block-grids
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA