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 clases de ajuste de respuesta de cuadrícula XY se utilizan para volver al comportamiento automático desde el comportamiento porcentual o el comportamiento de reducción.
Clases de ajustes de respuesta de cuadrícula XY de Foundation CSS
- .[size]-auto: esta clase ayuda a volver al comportamiento automático. Aquí el tamaño puede ser pequeño, mediano o grande.
- .[size]-shrink: esta clase ayuda a volver al comportamiento de reducción. Aquí el tamaño puede ser pequeño, mediano o grande.
Sintaxis:
<div class="grid-x">
<div class="[size]-auto">
.......
</div>
</div>
Ejemplo 1: Este ejemplo ilustra el uso de ajustes de respuesta de cuadrícula con una clase de automóvil grande.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS XY Grid Responsive Adjustments</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>
<style>
body {
padding: 100px;
}
.grid-x {
background-color: rgb(236, 215, 20);
}
.customClass1 {
background-color: rgb(31, 214, 31);
line-height: 50px;
color: white;
}
.customClass2 {
background-color: rgb(18, 116, 18);
line-height: 50px;
color: white;
}
.customClass3 {
background-color: rgb(20, 212, 20);
line-height: 50px;
color: white;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
GeeksforGeeks
</h1>
<div class="grid-x">
<div class="large-auto customClass1 cell">
Geek-1
</div>
<div class="large-auto customClass2 cell">
Geek-2
</div>
<div class="large-auto customClass3 cell">
Geek-3
</div>
</div>
</body>
</html>
Producción:
Ajustes receptivos de la cuadrícula Foundation CSS XY
Ejemplo 2: este ejemplo ilustra el uso de ajustes de respuesta de cuadrícula con una clase de contracción grande.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS XY Grid Responsive Adjustments</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>
<style>
body {
padding: 100px;
}
.grid-x {
background-color: rgb(236, 215, 20);
}
.customClass1 {
background-color: rgb(31, 214, 31);
line-height: 50px;
color: white;
}
.customClass2 {
background-color: rgb(18, 116, 18);
line-height: 50px;
color: white;
}
.customClass3 {
background-color: rgb(20, 212, 20);
line-height: 50px;
color: white;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: green">
GeeksforGeeks
</h1>
<div class="grid-x">
<div class="large-shrink customClass1 cell">
Geek-1
</div>
<div class="large-shrink customClass2 cell">
Geek-2
</div>
<div class="large-shrink customClass3 cell">
Geek-3
</div>
</div>
</body>
</html>
Producción:
Ajustes receptivos de la cuadrícula Foundation CSS XY
Referencia: https://get.foundation/sites/docs/xy-grid.html#responsive-adjustments
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