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

[Duda] Empezando el Grid

Referente al curso CSS Grid: Simplificando layouts

por Dayris del Valle Guerrero Guillén
| 47.5k xp | 2 posts
<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>

CSS:

.box { height: 50px; width: 50px; background-color: green; }

FLEXBOX:

.box{ display: flex; height: 70px; width: 70px; background-color: green; text-align: center; justify-content: center; align-items: center; }

.grid{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

1 respuesta
por Rafaela Rocha
| 2876.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Dayris!

En tu código HTML y CSS, veo que estás utilizando tanto Grid como Flexbox. Si tu intención es utilizar Grid, debes cambiar la clase "grid" en tu HTML de "display: flex" a "display: grid". Además, debes definir las columnas y filas de tu grid utilizando las propiedades "grid-template-columns" y "grid-template-rows" en tu CSS.

Por ejemplo, si quieres que tu grid tenga 3 columnas y 3 filas, puedes agregar lo siguiente a tu CSS:

.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }

Esto creará un grid de 3x3 con 9 cajas iguales. Luego, puedes agregar la clase "box" a cada una de tus cajas en tu HTML y aplicar cualquier estilo adicional que desees en tu CSS.

Espero que esto te ayude a empezar con Grid. Si tienes alguna otra pregunta, no dudes en preguntar. ¡Espero haber ayudado y buenos estudios!

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