Teoría
Teoría

fr: una fracción del espacio disponible

Ya redefinimos los estilos del navegador para <body> y la lista de ventajas. Ahora cambiaremos el flujo. El contenido de la lista debe formar dos columnas:

Convertiremos la lista en un contenedor grid, como hicimos con el encabezado en este ejercicio.

La lista tiene seis elementos que debemos repartir en dos columnas. Si un contenedor grid tiene más elementos que columnas, los siguientes pasan automáticamente a una fila nueva y se reparten de la misma forma. En nuestro caso habrá tres filas.

El diseño indica que las columnas deben tener el mismo ancho y ocupar todo el espacio disponible. ¿Cómo lo conseguimos si no sabemos qué tamaño de pantalla tiene cada persona?

Usaremos una unidad especial para el tamaño de las columnas: fr, abreviatura de fraction («fracción»). Representa una fracción del espacio disponible en el contenedor grid.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

En este ejemplo, el ancho disponible se divide en tres partes iguales. La primera columna recibe una parte y la segunda, dos. Aunque cambie el ancho del contenedor, la proporción entre las columnas se mantiene.

También podemos combinar fr con píxeles. Este código crea una columna derecha de 200px y una columna izquierda que ocupa todo el espacio restante:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 200px;
}

Practicaremos con fr para entender cómo funciona. Después dividiremos la lista de ventajas en dos columnas del mismo ancho.

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

body { margin: 0; } .page-header { display: grid; grid-template-columns: 210px 200px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 20px; } .features-list { margin-top: 0; margin-bottom: 0; padding: 20px; }

ObjetivosRealizado

Agrega a la lista de ventajas la propiedad display con el valor grid.
Ahora agrega la propiedad grid-template-columns con el valor 2fr 1fr. La primera columna tendrá el doble de ancho que la segunda.
Cambia el ancho de la vista previa para comprobar que la proporción se mantiene. Para hacerlo, arrastra la flecha situada arriba, entre el editor y la vista previa.
Cambia el valor de grid-template-columns a 100px 1fr. La primera columna tendrá un ancho de 100px y la segunda ocupará el espacio restante.
Por último, cambia el valor de grid-template-columns a 1fr 1fr. Las columnas se repartirán por igual el espacio disponible de la lista.