¿Cuáles son las propiedades clave para definir una cuadrícula con CSS Grid?

Para definir la estructura fundamental de una cuadrícula con CSS Grid, las propiedades clave se aplican al elemento contenedor:

1. display: grid; (o inline-grid;):
   Este es el punto de partida. Al aplicar display: grid; a un elemento, este se convierte en un contenedor de cuadrícula, y sus hijos directos se transforman en elementos de la cuadrícula.
   .mi-contenedor {
display: grid;
}
2. grid-template-columns:
   Esta propiedad define las columnas de la cuadrícula. Aquí especificas el número de columnas y el tamaño de cada una. Puedes usar diversas unidades como píxeles (px), porcentajes (%), la unidad de fracción (fr que distribuye el espacio disponible), o funciones como repeat() para patrones repetitivos y minmax() para tamaños flexibles.
   .mi-contenedor {
display: grid; /* Ejemplo: tres columnas, la primera de 100px, la segunda ocupa 1 fracción del espacio restante, y la tercera 2 fracciones. */
grid-template-columns: 100px 1fr 2fr;
}
3. grid-template-rows:
   De manera similar a grid-template-columns, esta propiedad define las filas de la cuadrícula y sus alturas. También acepta las mismas unidades y funciones de tamaño.
   .mi-contenedor { display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Ejemplo: dos filas, la primera de altura automática según su contenido, la segunda de 200px. */
grid-template-rows: auto 200px;
}
4. gap (o row-gap y column-gap):
   Esta propiedad (anteriormente grid-gap) permite definir el espacio o «canalón» (gutter) entre las pistas (filas y columnas) de la cuadrícula. Puedes especificar un solo valor para aplicarlo tanto a filas como a columnas, o dos valores (row-gap column-gap).
   .mi-contenedor {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Tres columnas de igual ancho */
grid-template-rows: auto; gap: 15px 10px; /* 15px de espacio entre filas, 10px entre columnas */
}

Estas propiedades son la base para construir la estructura de tu cuadrícula. Luego, utilizarás otras propiedades en los elementos para posicionarlos dentro de esta estructura definida.