Solucionado (ver solución)
Solucionado
(ver solución)
2
respuestas

[Proyecto] 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 Arlene Capellán
| 140.9k xp | 42 posts

mi codigo

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PRUEBA</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="pruebastyle.css">
    <link rel="stylesheet" href="css/flexbox.css">
</head>

<body>
    <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>

</body>



</html>
.box {
  height: 50px;
  width: 50px;
  background-color: black;
  text-align: center;
  color: white;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  width: 25%;
  align-items: center;
  justify-content: space-between;
  margin-left: 15%
}
2 respuestas
solución!
por Rafaela Rocha
| 2874.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Arlene!

En tu código veo que estás utilizando Flexbox para crear una cuadrícula de cajas con diferentes lenguajes de programación. Sin embargo, noto que la propiedad width de la clase .grid está establecida en un 25%, lo que significa que cada elemento ocupará solo un cuarto del ancho del contenedor. Si deseas que los elementos ocupen más espacio, puedes aumentar el valor de esta propiedad.

Además, la propiedad justify-content establecida en space-between distribuirá el espacio sobrante entre los elementos, lo que puede hacer que se vean desiguales. Si deseas que los elementos se distribuyan uniformemente en la fila, puedes utilizar la propiedad justify-content: space-around.

Aquí te dejo un ejemplo de cómo podrías modificar tu código para que los elementos ocupen más espacio y se distribuyan uniformemente:

.box {
  height: 50px;
  width: 100px;
  background-color: black;
  text-align: center;
  color: white;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  align-items: center;
  justify-content: space-around;
  margin: 0 auto;
}

Espero que esto te ayude a mejorar tu proyecto. ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)
por Arlene Capellán
| 140.9k xp | 42 posts

mil gracias rafaela!!!!!