Teoría
Teoría

La propiedad gap: espacio entre elementos grid

La lista de ventajas ya se parece a la del diseño, pero falta espacio entre los elementos.

Vamos a agregarlo. Aquí margin no resulta muy cómodo, porque también afecta la distancia hasta los límites del contenedor. Además, en un contenedor grid se suman los márgenes de los elementos vecinos, tanto en horizontal como en vertical. Si ambos tienen el mismo margen, la distancia entre ellos será el doble de ese valor.

Usaremos la propiedad gap del contenedor grid. Define el espacio entre los elementos sin modificar la distancia hasta el contenedor. Compara:

Recuerda que gap se aplica al contenedor grid, mientras que margin se aplica a sus elementos.

Podemos definir por separado el espacio horizontal y el vertical: column-gap controla la separación entre columnas y row-gap, entre filas.

.grid-container {
  column-gap: 15px;
  row-gap: 5px;
}

Si ambos espacios son iguales, conviene usar la propiedad abreviada gap:

.grid-container {
  gap: 20px;
}

Practicaremos con column-gap y row-gap. Después usaremos gap para dejar los espacios como en el diseño.

Si gap tiene dos valores, el primero define el espacio entre filas y el segundo, entre columnas:

.grid-container {
  gap: 20px 50px;
}

Esta forma es más corta, pero cuesta más interpretarla. Por eso, cuando los espacios son distintos, es preferible usar row-gap y column-gap.

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 { display: grid; grid-template-columns: 1fr 1fr; margin-top: 0; margin-bottom: 0; padding: 20px; }

ObjetivosRealizado

Agrega a la lista de ventajas espacio entre las filas: row-gap: 5px;.
Ahora agrega espacio entre las columnas: column-gap: 15px;.
Elimina row-gap y column-gap. Agrega a la lista de ventajas la propiedad gap con el valor 10px.