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. Las celdas colapsadas de la cuadrícula XY se usan cuando no desea que se contraigan todas las consultas de medios. Para lidiar con esta situación, use el tamaño de consulta de medios junto con el colapso y agréguelo al elemento de cuadrícula.
- [size]-[gutter-type]-collapse: Esta clase nos ayuda a eliminar las canaletas de la celda.
<div class="grid-x [size]-[gutter-type]-collapse">
...
</div>
Ejemplo 1: este ejemplo ilustra el uso de celdas de colapso de cuadrícula con la clase de colapso de relleno grande.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS XY Grid Collapse Cells</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> <h3>Foundation CSS XY Grid Collapse Cells</h3> </center> <div class="callout warning grid-x grid-margin-x large-margin-collapse"> <div class="cell callout alert small-6"> having gutters on small, medium and no gutters after large </div> <div class="cell callout success small-6"> having gutters on small, medium and no gutters after large </div> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo ilustra el uso de celdas de colapso de cuadrícula con clase de colapso de margen medio .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS XY Grid Collapse Cells</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> <h3>Foundation CSS XY Grid Collapse Cells</h3> </center> <div class="callout alert grid-x grid-margin-x medium-margin-collapse"> <div class="cell callout success small-6"> having gutters on small and no gutters on medium or large </div> <div class="cell callout warning small-6"> having gutters on small and no gutters on medium or large </div> </div> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/xy-grid.html#collapse-cells
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