CSS grid layout
CSS grid layout o CSS grid es una técnica de las Hojas de Estilo en Cascada que permite a los desarrolladores web crear diseños complejos y adaptables con mayor facilidad en todos los navegadores.[1] Ha habido otros métodos para controlar los métodos de diseño de páginas web, como las tablas, el modelo de caja, y CSS flex. CSS grid no es actualmente un estándar oficial (es una W3C Candidate Recommendation) aunque ha sido adoptada por la mayoría de los principales navegadores.[2]
Motivación
[editar]
CSS grid puede crear diseños más asimétricos como el layout anterior y opciones de diseño como CSS floats. También permite un código más estandarizado que funciona en todos los navegadores. Esto es en contraste con confiar en los atajos específicos de los navegadores o en complicadas soluciones.[2]
Un problema con la explotación de floats en CSS es que si el contenido se añade a una parte de la página podría interrumpir el flujo de la página y romper el diseño. Esto se debe a las diferentes alturas de los elementos de diseño.[2] Aunque CSS flex soporta diseños flexibles y proporciona la flexibilidad de crear diseños complejos, falla cuándo surge la necesidad de crear diseños sensibles en un espacio bidimensional.
Soporte en navegadores
[editar]A partir de octubre de 2017, Chrome, Firefox, Safari y Edge soportan CSS grid sin prefijos.[3][4][5] IE 10 y 11 soportan CSS grid pero con una especificación obsoleta. En móviles, todos los navegadores modernos soportan CSS grid excepto Opera Mini y UC Browser. Los desarrolladores web orientados a navegadores más antiguos pueden utilizar Modernizr 3.5.0 para detectar y degradar con gracia la página web según sea necesario.[6]
Utilización en frameworks
[editar]No hay frameworks web que incorporen CSS grid en contraste con CSS flex que se utiliza en frameworks como Bootstrap 4 y Foundation 6.[7]
La unidad fr
[editar]La unidad fr se utiliza a menudo con el diseño de grid.[8][9][10]
La unidad fr, que forma parte de la especificación de la disposición de CSS grid, representa una fracción del espacio sobrante en el contenedor grid.[11]
Ejemplos
[editar]Ejemplo del holy grail layout:
<html>
<style>
div { border: 1px solid; }
body {
display: grid;
grid-template-columns: 10em auto 10em;
grid-template-areas:
"header header header"
"left middle right"
"footer footer footer";
}
</style>
<body>
<div style="grid-area: header">The header</div>
<div style="grid-area: footer">The footer</div>
<div style="grid-area: left">The left panel</div>
<div style="grid-area: middle; height: 200px">The main content area</div>
<div style="grid-area: right">The right panel</div>
</body>
</html>
Aquí hay un ejemplo de una tabla de valores:
<html>
<style>
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 0.5em;
}
div {
border: 1px solid;
}
</style>
<body>
<div class="wrapper">
<h3>Header1</h3><h3>Header2</h3><h3>Header3</h3>
<div>value11</div><div>value12</div><div>value13</div>
<div>value21</div><div>value22</div><div>value23</div>
<div>value31</div><div>value32</div><div>value33</div>
<div>value41</div><div>value42</div><div>value43</div>
<div>value51</div><div>value52</div><div>value53</div>
<div>value61</div><div>value62</div><div>value63</div>
<div>value71</div><div>value72</div><div>value73</div>
</div>
</body>
</html>
Referencias
[editar]- ↑ «CSS Grid – Table layout is back. Be there and be square.». Google. Consultado el 6 de octubre de 2017.
- ↑ a b c «CSS Grid Layout Module Level 1». W3C. 9 de mayo de 2017. Consultado el 7 de octubre de 2017.
- ↑ Anderson, Kareem (13 de septiembre de 2017). «Microsoft’s newest browser gets a significant boost with EdgeHTML 16». Consultado el 7 de octubre de 2017.
- ↑ Protalinski, Emil (9 de marzo de 2017). «Chrome 57 arrives with CSS Grid Layout and API improvements | VentureBeat». Consultado el 7 de octubre de 2017.
- ↑ «CSS Grid Layout». Can I Use. Consultado el 7 de octubre de 2017.
- ↑ Ates, Faruk. «Modernizr 3.5.0».
- ↑ «Flexbox grids and frameworks». Archivado desde el original el 16 de febrero de 2017. Consultado el 13 de mayo de 2020.
- ↑ "CSS Grid Layout: The Fr Unit".
- ↑ "Fractional.".
- ↑ "An Introduction to the `fr` CSS unit"
- ↑ "Flexible Lengths: the 'fr' unit"
Enlaces externos
[editar]| Control de autoridades |
|
|---|
Datos: Q42320210