CSS Grid es el protocolo mas reciente para crear layouts disponible en CSS. Ofrece una perspectiva bidimensional para poder armar diseños y ubicar elementos en pantalla. Como flexbox, se declara en la propiedad display

main{
display:grid;
}

Luego de declararlo ya podemos empezar a diseñar nuestra grilla.

grid-template-columns

Lo primero que debemos declarar es cuantas columnas tendrá nuestra grilla. Para eso utilizamos la propiedad grid-template-columns. Como valores en esta propiedad solo se aceptan medidas, es decir que debemos especificar cuanto medirá cada columna que querramos crear. Por ejemplo, si queremos hacer tres columnas debemos pasarle 3 medidas

main{
display:grid;
grid-template-columns:1fr 1fr 200px;
}

Funcion repeat()

Supongamos que queremos que todas las columnas tengan la misma medida. Podriamos escribir todas las veces la misma medida pero eso no sería muy elegante. Además si tenemos 9 columnas deberíamos escribir 9 veces la medida, por ejemplo. Para eso existe la funcion repeat. Supongamos que queremos 7 columnas y que cada una ocupe 1fr

main{
display:grid;
grid-template-columns:repeat(7,1fr);
}

Funcion minmax()

CSS Grid incorpora para poder medir tamaños de columnas la funcion minmax(). Se trata de una función que combina max-width y min-width para grid. En la misma debemos pasarle dos valores. El primero resulta cual será el tamaño minimo de la columna y en el segundo será cuanto de maximo podrá crecer. Supongamos que queremos que la primer columna tenga un tamaño minimo de 300px y maximo de 1fr

main{
display:grid;
grid-template-columns:minmax(300px,1fr) 1fr 200px;
}

column-gap

Column-gap nos permite declarar cuanto espacio de separación habrá entre cada columna. Funciona de forma similar a la propiedad gap:

main{
display:grid;
grid-template-columns:minmax(300px,1fr) 1fr 200px;
column-gap:20px;
}

grid-column

Una vez que declaramos la cantidad de columnas y el tamaño de las mismas es hora de posicionar el contenido. Para eso utilizamos la propiedad grid-column. Como valores debemos pasarle en que linea arrancará la columna y en cual finalizará. Antes que nada, debes saber como Grid cuenta las columnas. Lo hace de esta manera:

Hay dos formas de contar lineas. Si se cuentan de izquierda a derecha (primer ejemplo) se utilizan numeros positivos. En caso de contarlas de derecha a izquierda (segundo ejemplo) se utilizan numeros negativos. Podes elegir usar la que mas te guste.

Ahora sabiendo como se cuentan las linea podemos seleccionar como armar nuestra cuadricula. Supongamos que queremos que el primer elemento, como es el caso del header generalmente ocupe todo el ancho de la grilla. Para esto debemos declararlo de la siguiente manera

grid-column: 1 / 3;