¡Hola Carlosmarcorodríguezgómez!
Para crear un grid utilizando Flexbox, puedes utilizar la propiedad "flex-wrap" junto con "flex-basis" y "flex-grow".
Primero, debes definir el contenedor "grid" como un contenedor flexible con "display: flex". Luego, puedes establecer "flex-wrap: wrap" para que los elementos se ajusten automáticamente a la siguiente línea cuando no haya suficiente espacio en una sola línea.
A continuación, puedes establecer "flex-basis" en un valor específico para definir el tamaño base de cada elemento. En este caso, puedes establecer "flex-basis: 25%" para que cada elemento ocupe el 25% del ancho del contenedor "grid".
Finalmente, puedes establecer "flex-grow: 1" para que cada elemento pueda crecer y ocupar cualquier espacio adicional disponible en la línea.
Aquí está el código CSS que podrías utilizar:
.grid {
display: flex;
flex-wrap: wrap;
}
.box {
height: 50px;
flex-basis: 25%;
flex-grow: 1;
background-color: green;
}
Recuerda que puedes ajustar los valores de "flex-basis" y "flex-grow" según tus necesidades.
¡Espero haber ayudado y buenos estudios!
Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)