Css Grid – Introducción

CSS Grid ofrece un sistema de diseño basado en cuadrícula, con filas y columnas, lo que posibilita el diseño de páginas web evitando el uso de floats o posicionamiento.

CSS Grid facilita el desarrollo de proyectos complejos, adaptados a diferentes tipos de dispositivos y resoluciones.

Css Grid – también conocido como grid – es un sistema de maquetación bidimensional basado en cuadrículas. Grid supone un importante avance para el desarrollo web ya que, aparte de ofrecer soluciones a importantes problemas de diseño habituales antes de su aparición, permite crear estructuras más complejas con menos volumen de código o elementos dinámicos que se adaptan a diferentes dispositivos y resoluciones de pantalla.

Conceptos básicos – La cuadrícula

Un diseño con css grid, consta de un elemento principal, sobre el que se aplica la propiedad grid. Este elemento es el padre directo de todos los elementos secundarios de la cuadrícula.

<div id="id01" class="grid-container">
<div class="grid-item">Norte</div>
<div class="grid-item">Sur</div>
<div class="grid-item">Aquí</div>
<div class="grid-item">Este</div>
<div class="grid-item">Oeste</div>
</div>

<div class="grid-item">Norte</div>

<div class="grid-item">Oeste</div>

</div>

En el ejemplo superior tenemos un contenedor principal – grid-container -, con cinco elementos secundarios –grid-item – en su interior .

CSS
.grid-container {
display: grid;
}

CSS

.grid-container {

display: grid;

}

Como vemos, crear la cuadrícula grid es sumamente sencillo, solo necesitamos añadir al contenedor principal la propiedad display, con uno de los dos valores de grid: grid o inline-grid,

Los valores inline-grid y grid indican cómo se comportarán los elementos secundarios, en este caso grid-item, con respecto al elemento principal, en este caso grid-container.

Inline-grid

Norte

Sur

Aquí

Este

Oeste pero veremos

Con inline-grid los grid-items se colocan, de forma predeterminada, en filas ocupando el ancho definido por el contenido del grid-item más ancho.

Grid

Norte

Sur

Aquí

Este

Oeste

Con grid los grid-items se colocan, de forma predeterminada, en filas abarcando todo el ancho del grid-container.

Terminología básica

Antes de adentrarnos en las propiedades de grid, conviene comprender una serie de conceptos básicos que utilizaremos con frecuencia.

Grid container: Elemento sobre el que se aplica la propiedad display con uno de los dos valores de grid.
Grid item: Elemento secundario dentro del grid container, es decir, descendiente directo del mismo.
Grid lines: Cada una de las líneas divisorias, verticales u horizontales, que componen la estructura de la cuadrícula.
Grid columns: Cada columna, separada por dos grid lines.
Grid rows: Cada fila, separada por dos grid lines.

Propiedades de la cuadrícula

grid-template-columns

Define el número de columnas y su ancho.

.grid-container {grid-template-columns:200px auto 200px;}

1	.grid-container {grid-template-columns:200px auto 200px;}

En el ejemplo anterior el espacio disponible dentro de grid container se divide entre dos celdas laterales de 200px y una central que ocupará el resto. El tamaño puede representarse en modo de porcentaje, fracción del espacio libre -fr- o longitud.

grid-template-rows

Define el número de filas y su altura.

.grid-container {grid-template-rows:100px 20vh 200px;}

1	.grid-container {grid-template-rows:100px 20vh 200px;}

El tamaño puede representarse en modo de porcentaje, fracción del espacio libre -fr- o longitud.

grid-gap

Define la separación que habrá entre columnas y entre filas.

.grid-container {grid-gap:20px;}

1	.grid-container {grid-gap:20px;}

En este caso, filas y columnas tendrían una separación de 20px.