Para utilizar CSS Grid definiremos un contenedor padre y en su interior los ítems que se necesiten crear. Tanto para el contenedor padre como para las rejillas que se definen en su interior.
Para crear la cuadrícula grid hay que definir sobre el elemento contenedor la propiedad display y especificar el valor grid o inline-grid.
inline-grid: Cuadrícula en línea con respecto al contenido exterior
grid: Cuadrícula en bloque con respecto al contenido exterior
Podemos usar las unidades que ya conocemos como los píxeles o los porcentajes, o utilizar la unidad fr (unidad fraccional propia del sistema CSS Grid) que indica la proporción del espacio que ocupará cada elemento./p>
grid-template-columns. [col1] [col2] …. Tamaño de cada columna.
grid-template-rows. [fila1] [fila2] …. Tamaño de cada fila.
Podemos definir el espaciado entre las rejillas mediante las propiedades row-gap y column-gap. El espaciado solo se crea entre las columnas/filas, no en los bordes exteriores.
column-gap Espaciado entre columnas
row-gap Espaciado entre filas
La propiedad grid-gap de CSS Grid es una propiedad abreviada para establecer tanto grid-column-gap como grid-row-gap en una sola declaración. Esta propiedad acepta uno o dos valores, donde el primer valor especifica el tamaño del espacio entre las filas y el segundo valor especifica el tamaño del espacio entre las columnas.
Abril Yamilet Cisneos Amador
CECyTEM