Ejercicios de práctica de CSS

Ejercicio 15

Crea un layout de dos columnas usando CSS Grid. La primera columna debe ocupar el 30% del espacio y la segunda el 70%. Asegúrate de que el diseño sea responsivo y se adapte a pantallas más pequeñas.

Lo resolví del siguiente modo:

CSS:

                .container {
                    display: grid;
                    grid-template-columns: 30% 70%;
                    gap: 20px;
                }

                .column {
                    padding: 10px;
                    background-color: #f4f4f4;
                    border: 1px solid #ddd;
                }

                /* Diseño responsivo */
                @media (max-width: 768px) {
                    .container {
                        grid-template-columns: 1fr;
                    }
                }
            

HTML:

                <div class="container">
                    <div class="column">Columna 1</div>
                    <div class="column">Columna 2</div>
                </div>