Trabajar con una grilla usando el módulo de CSS Grid implica dos cosas, definir la grilla y posicionar elementos en la grilla.

Definir la grilla significa que vamos a especificar de cuántas columnas y cuántas filas se compondrá la grilla, además del tamaño que tendrá cada fila y cada columna. En la intersección de la definición de estas filas y estas columnas se generan espacios en los que podemos posicionar elementos.

Un par de conceptos muy importantes son los de las líneas y las áreas. Aunque la grilla es virtual, cada línea límite de cada fila y cada columna tiene un nombre, por defecto un número empezando por el 1 que indica en qué posición está la línea, sin embargo, puedes especificar los nombres de estas líneas.

Lo que hace increíble al Grid es el sistema de dos dimensiones, el que nos permite extender elementos a través de múltiples columnas y filas, esto lo hacemos a través de distintos principios que conocerás más adelante, entre ellos indicar la línea en la que inicia un elemento y la línea en la que termine, un indicador de cuántos espacios de la grilla debe usar, etc.

Además, es posible que nosotros definamos áreas dentro de la grilla, es decir, espacios predefinidos que ocupen 1 o varias filas y columnas, eventualmente, podemos indicarle a un elemento que ocupe dicha área.

Tanto las líneas como las áreas de la grilla son elementos virtuales que no se ven y por tanto no afectan el cómo se muestra tu página, sin embargo, estos elementos sirven como referencia para que podamos colocar elementos dentro de la grilla.

En resumen, la grilla tiene un número definido de filas y un número definido de columnas, al final de cada una se coloca una línea a la que podemos asignarle un nombre, si juntamos 1 o más filas o columnas, podemos formar un área, podemos asignar un elemento a dicha área. Las áreas son una alternativa para definir la posición de un elemento, pero no son la única forma, poco a poco las iremos conociendo en los siguientes temas, continuemos.