CSS
Cuadrícula
Buscar..
Introducción
Grid layout es un nuevo y poderoso sistema de diseño CSS que permite dividir el contenido de una página web en filas y columnas de una manera fácil.
Observaciones
El nivel 1 del módulo de diseño de cuadrícula de CSS es, a partir del 9 de septiembre de 2016, una recomendación de candidato del W3C. Se considera que está en la etapa de prueba ( https://www.w3.org/Style/CSS/current-work) .
A partir del 3 de julio de 2017, los navegadores Internet Explorer 10 y 11 y Edge de Microsoft solo admiten una versión anterior de la especificación utilizando un prefijo de proveedor.
Ejemplo básico
| Propiedad | Valores posibles |
|---|---|
| monitor | rejilla / rejilla en línea |
La cuadrícula de CSS se define como una propiedad de visualización. Se aplica a un elemento padre y sus hijos inmediatos solamente.
Considere el siguiente marcado:
<section class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
</section>
La forma más sencilla de definir la estructura de marcado anterior como una cuadrícula es simplemente establecer su propiedad de display en grid :
.container {
display: grid;
}
Sin embargo, hacer esto invariablemente hará que todos los elementos secundarios se colapsen uno encima del otro. Esto se debe a que los niños actualmente no saben cómo posicionarse dentro de la cuadrícula. Pero podemos decirles explícitamente.
Primero debemos indicar al elemento de la cuadrícula .container cuántas filas y columnas conformarán su estructura, y podemos hacerlo utilizando las propiedades de grid-columns y grid-rows (observe la pluralización):
.container {
display: grid;
grid-columns: 50px 50px 50px;
grid-rows: 50px 50px;
}
Sin embargo, eso todavía no nos ayuda mucho porque necesitamos dar una orden a cada elemento secundario. Podemos hacer esto especificando los valores de la grid-row grid-column que le indicarán dónde se encuentra en la cuadrícula:
.container .item1 {
grid-column: 1;
grid-row: 1;
}
.container .item2 {
grid-column: 2;
grid-row: 1;
}
.container .item3 {
grid-column: 1;
grid-row: 2;
}
.container .item4 {
grid-column: 2;
grid-row: 2;
}
Al dar a cada artículo un valor de columna y fila, identifica el orden de los artículos dentro del contenedor.
Ver un ejemplo de trabajo en JSFiddle . Necesitará ver esto en IE10, IE11 o Edge para que funcione, ya que estos son actualmente los únicos navegadores que admiten Grid Layout (con el prefijo del proveedor -ms- ) o habilitar una bandera en Chrome, Opera y Firefox de acuerdo con el uso en orden para probar con ellos.