Maquetación de Sección con Grid en HTML y CSS

Curso de CSS Grid Básico

Clase 9 de 13

Clase 9 / 13

Recursos

El primer paso antes de crear el código es analizar las etiquetas que utilizaremos en la construcción de nuestro proyecto.

Maquetación del proyecto

Observamos un título, un párrafo y un botón del lado izquierdo, y una imagen del derecho. Con eso podemos empezar a crear las etiquetas h1, p, button e img.
Empezamos creando una sección con una clase identificativa.
Dentro, creamos un div con su clase identificadora para uno de los lados que contendrá el texto, mientras que el otro será la etiqueta img, también con su clase.
Por último, agregamos el contenido que observamos en la imagen.

Nota: para generar un lorem ipsum en html, sólo es necesario colocar el número de palabras que deseamos seguido de la palabra lorem. Ej: lorem5 generará cinco palabras.

        <section class=""hero"">
            <div class=""info"">
                <h1>Check the<br>best food</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <button>Book a table</button>
            </div>
            <img class=""hero-image"" src=""./img/hero.png"" alt=""Plato de pasta y vegetales"">
        </section>

Estilos del proyecto

Llamamos la primera sección desde su clase con .hero.
Por supuesto, aplicamos display: grid para que todo el contenido herede esta propiedad.
Ajustamos el ancho de las dos columnas, logrando que la de la imagen sea una fracción más ancha que la del texto con grid-template-columns: 2fr 3fr.
Ajustamos el alto de las filas en un máximo de 400px con grid-auto-rows: 400px.
Luego, llamamos la imagen desde su clase con .hero-image.
Le damos un alto y ancho del 100% para que siempre ocupe el total del contenedor, sin crecer demasiado ni romperse.

object-fit: contain nos ayuda a que la imagen se ajuste al espacio que está ocupando. La propiedad contain permite que siempre se vea completa. Por último, alineamos el texto verticalmente con align-self: center.

.hero {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-auto-rows: 400px;
}
.hero-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.info {
    align-self: center;
}