Teoría
Teoría

grid-template-columns: la plantilla del contenedor grid

Necesitamos colocar el logotipo y el título del encabezado en dos columnas. Ya convertimos el encabezado en un contenedor grid, pero las columnas no aparecieron. Esto se debe a que, de forma predeterminada, un contenedor grid tiene una sola columna.

Para cambiarlo, hay que definir una plantilla para el contenedor grid con la propiedad grid-template-columns:

.grid-container {
  display: grid;
  grid-template-columns: 100px 150px 80px;
}

Este código divide el contenedor en tres columnas de 100, 150 y 80 píxeles de ancho. Los elementos grid se distribuyen automáticamente de izquierda a derecha.

En el encabezado necesitamos dos columnas de 210 y 200 píxeles:

Practicaremos con grid-template-columns y después dejaremos las columnas del encabezado con el ancho correcto.

Hay otras propiedades para definir la plantilla de un contenedor grid, como grid-template-rows y grid-template-areas. Se explican en detalle en el capítulo sobre CSS Grid.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="food-decorative.css"> <link rel="stylesheet" href="food-outline.css"> <link rel="stylesheet" href="style.css"> <title>Comida sana a domicilio</title> </head> <body> <header class="page-header"> <a class="logo"> <img src="img/food_logo.svg" alt="Logotipo de comida sana a domicilio" width="160" height="160"> </a> <h1 class="header-title">Comida sana a domicilio</h1> </header> <main class="page-main"> <ul class="features-list"> <li class="feature"> <h2>A diario</h2> <p>Entregamos menús todos los días de 6:00 a 22:00, incluidos fines de semana y días festivos.</p> </li> <li class="feature"> <h2>Variedad</h2> <p>Los platos no se repiten en seis meses. Nuestro creativo chef sabe sorprender.</p> </li> <li class="feature"> <h2>Saludable</h2> <p>Cada plato tiene el equilibrio ideal de vitaminas, minerales y micronutrientes.</p> </li> <li class="feature"> <h2>Seguridad</h2> <p>Tratamos los alimentos y los envases con todo cuidado.</p> </li> <li class="feature"> <h2>Suficiente</h2> <p>Elige entre menús de 1200, 2000 y 2800 kcal. Nadie se ha quedado con hambre.</p> </li> <li class="feature"> <h2>Económico</h2> <p>Cuesta la mitad que cocinar en casa.*</p> <p class="disclaimer">* Aunque no es seguro.</p> </li> </ul> </main> <footer class="page-footer"> <span class="copyright">© 2020 Todos los derechos reservados</span> </footer> </body> </html>

CSS

.page-header { display: grid; }

ObjetivosRealizado

Agrega a la regla de page-header la propiedad grid-template-columns con el valor 100px 400px. El logotipo y el título quedarán en una fila, pero el título se superpondrá al logotipo.
Reemplaza 100px 400px por 210px 200px. Ahora su distribución será casi como la del diseño.