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 el marco XY Grid en Foundation CSS.
En Foundation CSS, los canalones de cuadrícula XY se utilizan para dar margen y relleno al elemento de cuadrícula.
Foundation CSS XY Grid Gutters Clases:
- grid-margin-x: esta clase se utiliza para dar un margen a lo largo del eje x.
- grid-margin-y: esta clase se usa para dar un margen a lo largo del eje y.
- grid-padding-x: esta clase se usa para dar relleno a lo largo del eje x.
- grid-padding-y: esta clase se usa para dar relleno a lo largo del eje y.
Sintaxis:
<div class="grid-x XY-Grid-Gutters-Classes:"> .... </div>
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de canales de cuadrícula con la clase grid-margin-x .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS XY Grid Gutters</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> </head> <body style="margin-inline:10rem;"> <center> <h1 style="color:green"> GeeksforGeeks </h1> <h3>Foundation CSS XY Grid Gutters</h3> <div class="callout success"> <div class="grid-x grid-margin-x"> <div class="cell medium-6 callout alert large-4"> cell with medium-6 large-4 </div> <div class="cell medium-4 callout warning large-8"> cell with medium-4 large-8 </div> </div> </div> </center> </body> </html>
Producción:
Ejemplo 2: a continuación se muestra el ejemplo que ilustra el uso de canales de cuadrícula con la clase grid-padding-x .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS XY Grid Gutters</title> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> </head> <body style="margin-inline:10rem;"> <center> <h1 style="text-align:center;color:green"> GeeksforGeeks </h1> <h3>Foundation CSS XY Grid Gutters</h3> <div class="callout success"> <div class="grid-x grid-padding-x"> <div class="cell medium-6 callout alert large-4"> cell with medium-6 large-4 </div> <div class="cell medium-4 callout warning large-8"> cell with medium-4 large-8 </div> </div> </div> </center> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/xy-grid.html#gutters
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