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.
Clase de desplazamiento de cuadrícula XY:
- [tamaño]-desplazamiento-[n]: esta clase se utiliza para establecer el desplazamiento de la cuadrícula. Aquí el tamaño es entre pequeño, mediano, grande y n es el número.
Sintaxis:
<div class="grid-x [size]-offset-[n]"> ..... </div>
Ejemplo 1: Este ejemplo ilustra el uso del desplazamiento de cuadrícula utilizando la clase de desplazamiento grande-2 .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS XY Grid Offsets</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: 5rem;"> <center> <h1 style="color: green"> GeeksforGeeks </h1> <h3>Foundation CSS XY Grid Offsets</h3> </center> <div class="callout warning grid-x grid-margin-x"> <div class="callout success cell small-4 large-offset-2"> it has offset-2 in large </div> <div class="callout success cell small-4"> small-4 cells </div> </div> </body> </html>
Producción:
Compensaciones de cuadrícula XY de Foundation CSS
Ejemplo 2: Este ejemplo ilustra el uso de la compensación de cuadrícula utilizando la clase de compensación media-4 .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS XY Grid Offsets</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: 5rem;"> <center> <h1 style="text-align: center; color: green"> GeeksforGeeks </h1> <h3>Foundation CSS XY Grid Offsets</h3> </center> <div class="callout warning grid-x grid-margin-x"> <div class="callout success small-4 medium-offset-4"> it has medium-offset-4 </div> <div class="cell callout success small-4"> small-4 cells </div> </div> </body> </html>
Producción:
Compensaciones de cuadrícula XY de Foundation CSS
Referencia: https://get.foundation/sites/docs/xy-grid.html#offsets
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