Clase 2: Qué es CSS Grids?

CSS Grid nos permite organizar nuestro layout con tablas que al momento de hacer responsive se pueden reorganizar y así conservar el diseño

Clase 3: Conceptos fundamentales sobre CSS Grid Layout

Clase 4: Definiendo columnas

Supongamos que tenemos un section que tiene una clase llamada container.

Dentro de este container tenemos 10 divs . Para usar Grid en estos sólo tenemos que ir a los estilos del container y usar el display: grid; pero no termina ahí, para Definir cuantas columnas queremos usamos grid-template-columns:; ahí pondríamos las medidas de nuestras columnas y el número de columnas que queremos, por ejemplo, si queremos una sóla columna sería.

display: grid;

grid-template-columns: 200px;

Si queremos tres:

grid-template-columns: 200px 200px 300px;

También podemos usar medidas como:

grid-template-columns: 25% 50% 25%;

O combinarlas:

grid-template-columns: 25% 200px 25%