Introducción a CSS Grid
CSS Grid es un método para distribuir elementos tanto horizontal como verticalmente. Es un método más avanzado en comparación con Flexbox, pero más complejo de dominar.
Para crear un grid, necesitas asignar
al elemento la propiedad display
con el valor grid:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
}
Después de esto, el elemento se convertirá en una cuadrícula bidimensional, en la que los elementos se distribuyen verticalmente (columnas) y horizontalmente (filas). El área en la intersección de una columna y una fila se llama celda.
Usando propiedades especiales, podrás distribuir elementos tanto por filas como por columnas. Esto permitirá hacer fácilmente, por ejemplo, cosas como esta:
En las siguientes lecciones, primero estudiaremos la distribución de elementos por columnas, luego pasaremos al estudio de las filas, y después combinaremos todo esto.
