Grid css

El CSS grid se puede utilizar para lograr muchos diseños diferentes.
Destaca por dividir una página en regiones principales, o definir la relación en términos de tamaño, posición y capas entre partes de un control construido a partir de primitivas HTML.
Al igual que las tablas, el grid layout permite a un autor alinear elementos en columnas y filas. Sin embargo, son posibles más diseños o más sencillos con CSS grid que como lo eran con las tablas. Por ejemplo, los elementos secundarios de un contenedor de cuadrícula podrían posicionarse de manera que se solapen y se superpongan, similar a los elementos posicionados en CSS.
Grid toma la filosofía y bases del Flexbox.

Para activar la cuadrícula grid hay que utilizar sobre el elemento contenedor la propiedad display y especificar el valor grid o inline-grid.
Este valor influye en como se comportará la cuadrícula con el contenido exterior.
El grid permite que la cuadrícula aparezca encima/debajo del contenido exterior (en bloque).
Y el inline-grid permite que la cuadrícula aparezca a la izquierda/derecha (en línea) del contenido exterior.

Es posible crear cuadrículas con un tamaño explícito.
Para ello, sólo tenemos que usar las propiedades CSS grid-template-columns y grid-template-rows, que sirven para indicar las dimensiones de cada celda de la cuadrícula, diferenciando entre columnas y filas.
grid-template-columns --->Establece el tamaño de las columnas (eje horizontal).
grid-template-rows --->Establece el tamaño de las filas (eje vertical).

Ejemplo
codigo ejemplo
#efecto2{
width: 230px;
height: 240px;
margin: auto;
display: grid;
/*Crea 1 columna con 1 franción igual*/
grid-template-columns: repeat(1,1fr);
/*Se para las celdas*/
grid-gap: 5px;
} .e2{
text-align: center;
width: 100px;
height: 24px;
border: 2px solid rgb(25, 0, 255);
background-color:rgb(1, 204, 170);
}
1
2
3
4
5
Vídeo explicación