La propiedad display: tipos de caja

Ya conectamos los estilos decorativos y resaltamos las cajas principales. Ahora seguiremos el diseño de arriba abajo para construir la distribución paso a paso.

La primera caja principal es el encabezado. Se marca con <header>, que genera una caja de bloque de forma predeterminada. Dentro están el logotipo (una imagen dentro de un enlace) y un título.

<header class="page-header">
  <a class="logo">
    <img src="img/food_logo.svg" alt="Logotipo">
  </a>
  <h1 class="header-title">Comida sana a domicilio</h1>
</header>

El logotipo ocupa el espacio que necesita su contenido. El título, en cambio, es una caja de bloque: empieza en una línea nueva y ocupa todo el ancho del encabezado. Por eso ahora aparecen uno debajo del otro. En el diseño están uno al lado del otro, como en dos columnas:

Hay varias formas de colocar elementos en dos columnas. Usaremos CSS Grid (grid significa «cuadrícula»). Es una tecnología práctica y popular, con buen soporte en los navegadores.

Para organizar el logotipo y el título con Grid, debemos cambiar el tipo de caja de su elemento padre, <header>. En CSS, la propiedad display determina el tipo de caja. Tiene más de una decena de valores, que puedes consultar en la especificación.

display: grid;

Una caja de tipo grid se llama contenedor grid, y sus hijos directos se llaman elementos grid.

Por fuera, para los demás elementos de la página, un contenedor grid se comporta como una caja de bloque. Sus elementos interiores se comportan de otra forma: incluso las cajas en línea pasan a ocupar toda el área que tienen disponible. Los márgenes de sus elementos también se comportan de manera diferente.

El encabezado tiene la clase page-header; usaremos ese selector para darle estilos. Lo convertiremos en un contenedor grid y observaremos qué ocurre con sus elementos: el logotipo y el título. En el siguiente ejercicio crearemos las columnas.