La propiedad display: grid; de CSS nos brinda multiples ventajas sobre los obsoletos metodos de maquetación (tablas, position, float u otros valores de display), para el diseño y maquetación de páginas web, como todas estas:
Flexibilidad: Te permite controlar los elementos en las 2 dimensiones (filas y columnas) con total libertad. Los elementos se pueden colocar en cualquier lugar de la cuadrícula.
Diseños complejos y adaptables: Facilita la creación de diseños complejos. Es perfecto para construir una imagen más grande y puede manejar diseños poco ortodoxos y asimétricos.
Menos código y menos bugs: Se reduce considerablemente el código empleado, lo que conlleva revisiones más sencillas y menor probabilidad de bugs y menor necesidad de media queries.
Funcionalidades del estilo auto layout: Como minmax(), repeat(), y auto-fill, funciones que tenemos en este fantástico sistema de maquetación, que vamos a ir viendo y nos serviran para crear layout responsive.
Mejora la organización y la legibilidad del sitio web.

Como ocurre con la propiedad display: flex;, hay que comprender primero los conceptos ó elementos básicos que intervienen para maquetar con display grid y que nos permitiran despues definir nuestro grid ó cuadricula.

Contenedor-grid: El elemento padre contenedor que definirá la cuadrícula o rejilla.
Ítems-grid: Cada uno de los hijos que contiene la cuadrícula (elemento contenedor).
Celda (grid cell): Cada uno de los cuadritos (unidad mínima) de la cuadrícula.
Area (grid area): Región o conjunto de celdas de la cuadrícula.
Banda (grid track): Banda horizontal o vertical de celdas de la cuadrícula.
Línea (grid line): Separador horizontal o vertical de las celdas de la cuadrícula.

Es importante, asimilar estos conceptos, para despues comprender las diversas formas que tenemos de declarar y dar formas a nuestras cuadriculas, como vamos a ir viendo.

Al igual que sucede en flex (por lo que conviene, tener las nociones básicas), tenemos una serie de propiedades que se aplicaran sobre el contenedor-grid y otras aplicables a los items-grid, con las que definiremos la estructura o composición de nuestra cuadricula. Primero os expongo unos cuadros resumenes de todas ellas y despues pasaremos a verlas con más detalle.

Al igual que en flex trabajar con grid es tan sencillo como declararle en el css, a cualquier etiqueta html la propiedad display: grid; y la convertiremos automáticamente en un contenedor grid ó cuadricula, y a sus elementos hijos o descendientes en item o elementos de esa cuadricula.

Disponemos de dos opciones para posicionar nuestro grid o cuadricula:
display: grid;: Obtendremos una cuadricula con comportamiento de bloque (block), será su comportamiento respecto al contenido exterior, no admite otros elementos al lado.
display: inline-grid;: Con este valor, nuestra cuadricula tendra un comportamiento como inline-block (solo ocupara el ancho de su contenido), y si podría alinearse con otros contenidos, si el ancho lo permite.
Bueno pues una vez que tenemos nuestra cuadricula vamos a ir viendo diferentes formas de definir su estructura.

Quizas la manera más utilizada e intuitiva de construir una cuadricula, sea declarandole explicitamente unas medidas (sizes), a sus columnas y filas, y para esto disponemos en grid, de las siguientes propiedades y su sintaxis:
grid-template-columns: [col 1][col 2]...; Estableciendo el size de cada columna.
grid-template-rows: [fila 1][fila 2]...; Donde daremos tamaño a las filas del grid.

Para observar mejor estas propiedades, debajo teneis un ejemplo interactivo que tiene el siguiente código:

<div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> <div class="grid-item">5</div> <div class="grid-item">6</div> </div> .grid-container { display: grid; grid-template-columns: 50px 300px 200px; grid-template-rows: 200px 150px; background: steelblue; gap: 5px; } .grid-item { display: flex; justify-content: center; align-items: center; border: 2px solid black; background: rgba(0,0,0,.6); }

En nuestro ejemplo, construimos un layout de tres columnas y dos filas, depende de nosotros saber la cantidad de elementos hijos ó item que contendra nuestro grid, para diseñar el numero de columnas y filas que necesitemos, si se da el caso de que tenemos menos items, algunas celdas quedaran vacias y si tenemos más seguiran siendo items del grid pero no tendran formato.

Otros apuntes sobre el ejemplo de arriba, como vereís no hay ningun problema en mezclar display grid y display flex, y así controlar perfectamente la alineación y colocación de los elementos de una página.

En el ejemplo, también se observa una pequeña separación, entre los items, porque he declarado al contenedor grid, la propiedad gap, que es la propiedad abreviada para row-gap y column-gap juntas, y que puede recibir dos valores (uno para cada propiedad), o solo uno que sera el mismo para ambas. Esta propiedad nos puede servir para no emplear margin o padding en los items, que en muchas ocasiones complican el diseño, pero solo tiene efecto entre los items, no entre estos y el contenedor padre.

El valor por defecto de gap es 0, osea que depende de nosotros asignarle algún valor, sino estaran todos los items juntos.

Si habeis manipulado el ejemplo anterior, ya sabeis que para darle tamaños explicitos a nuestra cuadricula, con las propiedades grid-template-columns y grid-template-rows, podemos emplear cualquier unidad de medida absolutas o relativas (px, em, rem, etc), del viewport (vw, vh, etc), porcentajes (%), y la unidad especifica de grid fr (fracción restante) o una combinación de ellas.

Ejemplo: grid-template-columns: 1fr 10em 120px 0.5fr 10%; con lo que obtendriamos una cuadricula de 5 columnas como la siguiente:

La unidad fr, especifica de grid, es muy útil para controlar el espacio restante del contenedor-grid, recibe como valores numeros enteros o decimales positivos, y es una medida flexible en función de que tengamos declarado a su contenedor un max-width:;, si se redimensiona la ventana, se ira redimensionando el contenedor y el propio navegador ira calculando, el valor de la unidad fr correspondiente.

función repeat()

En ocasiones podemos necesitar construir un grid con un numero repetido de columnas o filas del mismo tamaño y puede resultar tedioso escribir tantas veces el mismo valor, veamoslo con un ejemplo:
grid-template-columns: 100px 1fr 0.5fr 1fr 0.5fr 1fr 0.5fr 5vw;
grid-template-rows: 100px 100px 100px;
empleando la función repeat(numero de veces, tamaño) lo resumiriamos así:
grid-template-columns: 100px repeat(3, 1fr 0.5fr) 5vw;
grid-template-rows: repeat(3, 100px);
obteniendo una cuadricula de 8 columnas y 3 filas (24 items) como la siguiente:

Además de la unidad fr, podemos conseguir un grid con celdas o grillas flexibles, y evitarnos el uso de media querys, empleando la siguiente función y las siguientes palabras clave:

función minmax()

Define un rango de tamaño mayor o igual que min y menor o igual que max. Se emplea con rejillas CSS. Esta función toma dos parámetros, min y max, con la siguiente sintexis:
minmax(size min, size max)
Cada parámetro puede ser un valor <length>, <percentage>, o uno de los valores de las palabras clave max-content, min-content o auto. Si max es menor que min, entonces max es ignorado y se trata a minmax(min, max) como min. Veamos un ejemplo:

<div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> </div> .grid-container { display: grid; grid-template-columns: repeat(2, minmax(200px, 500px)); grid-template-rows: repeat(2, 100px); background: steelblue; gap: 5px; } .grid-item { display: flex; justify-content: center; align-items: center; border: 2px solid black; background: rgba(0,0,0,.6); }

Redimensiona la ventana de tu navegador para ver como a su vez se redimensionan los items del ejemplo que tienen un rango de min = 200px y max = 500px, es decir que pueden disminuir de tamaño hasta en 300px.

palabras clave auto-fit y auto-fill

auto-fill y auto-fit son palabras clave que podemos ponerle a la función repeat() de las propiedades que determinan el tamaño de columnas o filas, y que indicaran al navegador si debe rellenar o ajustar los items al contenedor grid dependiendo del tamaño del viewport (región visible del navegador).

Con auto-fill las columnas o filas se ajustaran a su rango minimo, y auto-fit, en cambio, ajusta las columnas o filas para ocupar todo el espacio disponible, sin dejar espacio restante. La diferencia entre auto-fill y auto-fit es que auto-fill seguirá poniendo columnas aunque estén vacías si el espacio es mayor a la suma de sus anchos, mientras que auto-fit ajusta las columnas para ocupar todo el espacio disponible. Observa la diferencia en el siguiente ejemplo:
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));

La propiedad display grid llego con CSS3 para facilitarnos enormemente la labor de maquetación de páginas web. display: grid;