Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Grid

Esta es mi solución:

en el HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="stilo.css">
    <title>Gril</title>
</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>

Y este es mi stilo.css:

.grid {
    align-items: center;
    width: 450px;
    height: 200px;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    margin-left: 10%;

}

.box {
    height: 25px;
    width: 100px;
    background-color: green;
    text-align: center;
    color: aliceblue;
}
1 respuesta

¡Hola José!

Gracias por compartir tu solución con nosotros. Veo que estás utilizando Flexbox para crear una cuadrícula de elementos. Tu código se ve bien y funciona como se esperaba.

Solo quería señalar que si bien has establecido un ancho fijo para el contenedor de cuadrícula, también podrías hacer que se ajuste automáticamente al ancho de la ventana del navegador utilizando width: 100%;. De esta manera, la cuadrícula se ajustaría a diferentes tamaños de pantalla.

Además, si quisieras hacer que los elementos de la cuadrícula sean más grandes o más pequeños, podrías ajustar el ancho y la altura de la clase .box en tu archivo CSS.

¡Espero haber ayudado y buenos estudios!

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