.container { border: 2px solid #333; margin: 20px; padding: 10px; }




.item { background-color: #f0f0f0; border: 1px solid #ccc; padding: 20px; text-align: center; }



.flexbox { display: flex; flex-wrap: wrap;/* Permitir que los elementos se envuelvan */ }

.item { flex: 1 1 200px; /* Permitir que los elementos crezcan y se encojan */ }


@media (max-width: 600px) {
    .flexbox { flex-direction: column; /* Cambiar a columna en pantallas pequeñas */ }
   }


   .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Crear columnas flexibles */ gap: 10px; /* Espacio entre elementos */ }




   @media (max-width: 600px) { .grid { grid-template-columns: 1fr; /* Una sola columna en pantallas pequeñas */ } }