Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Empezando el grid

Referente al curso Flexbox: Posicione elementos en la pantalla, en el capítulo Grid principal y limitaciones de Flexbox y actividad Empezando el grid

por Angélica delos Ángeles Juárez Mora
| 86.2k xp | 110 posts
Estudiante

**Ahora necesitamos empezar un grid, para ello usaremos flex. ¿Cómo sería el CSS, usando flexbox, para organizar (pensando sólo en el posicionamiento) el siguiente HTML?

<div class="grid">
  <div class="box">Ruby on Rails</div>
  <div class="box">Java</div>
  <div class="box">HTML</div>
  <div class="box">Python</div>
  <div class="box">Wordpress</div>
  <div class="box">Bootstrap</div>
  <div class="box">Java Web</div>
  <div class="box">MySQL</div>
</div>

Cuando ejecute esta prueba en su máquina, recuerde poner la altura, el acho y algún color para las divs.

.box {
  height: 50px;
  width: 50px;
  background-color: green;
}
.grid {
  display: flex;
  flex-wrap: wrap;
}
1 respuesta
por Rafaela Rocha
| 2875.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Angélica!

Para organizar los elementos en un grid usando flexbox, puedes utilizar la propiedad flex-wrap: wrap en el contenedor, lo que permite que los elementos se ajusten automáticamente en varias filas. Luego, puedes establecer el ancho y la altura de cada elemento y aplicar un margen para separarlos.

Aquí te muestro un ejemplo de cómo podrías hacerlo:

.grid {
  display: flex;
  flex-wrap: wrap;
}

.box {
  height: 100px;
  width: 100px;
  margin: 10px;
  background-color: green;
}

En este ejemplo, establecí una altura y un ancho de 100px para cada elemento y apliqué un margen de 10px para separarlos. También puedes cambiar el color de fondo para que se adapte a tus necesidades.

Espero que esto te ayude a empezar tu grid con flexbox. ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)