Qué tal compañeros, Estoy teniendo problemas con las estructura de la grilla. ¿Cómo puedo generar una grilla que soporte los elementos ma...

Las respuestas de @RetaxMaster tanto como la de @RealEdgar están muy bien, y para dar un ejemplo mas grafico, aquí puedes ver como hacer la grilla de manera mas general y después irle agregando detalles a cada celda.

Hola @teffcode,

Pues así quedó ya corriendo en el navegador:

En efecto utilicé flexbox para el navbar inferior y quedó muy bien! Sólo tuve problema con los bordes, pero con práctica seguro lo resuelvo.

Muchas gracias por su apoyo compañeros.

Excelente caso de uso @VTorres !!! Completamente de acuerdo con la respuesta de @RetaxMaster, mil graciasss por este aporteee 👌🏼Nos cuentas qué tal te va con la implementación !!! 💕

Entiendo lo que me dicen! rataré de simplificar y definitivamente aplicar flexbox al contendeor inferior es una gran idea. Lo implementaré.

Saludos.

¡Hola!, @RealEdgar te dio una excelente respuesta, sin embargo, me encantaría complementar con esto:

Recuerda lo que dijo la profesora sobre evitar caer en demasiadas líneas, está bien que logres detectar muchas líneas, pero tienes que tratar de abstraer lo más que pueda, es decir, trata de detectar tu grilla principal, lo más externo, no te enfoques tanto al detalle.

Por ejemplo, veo que incluso pones los espacios mínimos como grilla, eso no es de relevancia, ya que eso es simplemente un espaciado, no hace parte como tal de la grilla de la página, es decir, no necesitas usar una columna para generar ese espaciado, para eso CSS Grid tiene una propiedad especial.

También es importante que sepas que puedes combinar CSS Grid con Flexbox, es decir, aunque algunas celdas tengan todavía más elementos con diferente estructura dentro, esos elementos los puedes estructurar usando otra grid interna, o también lo puedes hacer usandi Flexbox, recuerda que el punto es abstraer e imagina cómo puedes estructurar el resto del contenido usando otras propiedades de CSS :D

Mira mi ejemplo, puedes ver cómo hay partes que, aunque pude haberlas divido para la grid, no lo hice porque sé que puedo hacerlo con otras propiedades de CSS, puedes fijarte en la parte de Aportes, preguntas, etc. Eso se puede hacer con Flexbox, así que o era necesario dividir la grid ahí :D El objetivo es que trates de identificar la grid principal :D

Personalmente veo que hay filas y columnas innecesarias, para este sistema de grillas. Yo en lo personal dejaría 5 columnas y 4 filas como mucho. Pero como lo tienes también se puede.

Para resolver tu dilema hay varias soluciones la que se me ocurre es usar un display: flex; Lo que tienes marcado en azul seria tu contenedor padre al que le aplicarías el display: flex; // Este sería mi HTML

<div class="container">
	<div>01</div>
	<div>02</div>
	<div>03</div>
	<div>04</div>
</div>

Este seria mi CSS:

.container {
	display: flex;
}

Lo demás es cuestión de mas detalles según te agrade o no.

Por cierto, excelente post de Ajedrez 👍