A diferencia del panqueque deconstruido, este ejemplo no une sus elementos secundarios cuando cambia el tamaño de la pantalla. Este diseño, que suele conocerse como pie de página fijo, se usa tanto en sitios web como en aplicaciones, en aplicaciones para dispositivos móviles (el pie de página suele ser una barra de herramientas) y en sitios web, en particular, en aplicaciones de una sola página.
Si agregas display: grid al componente, obtendrás una cuadrícula de una sola columna. Sin embargo, el área principal solo será tan alta como el contenido con el pie de página debajo.
Para que el pie de página se adhiera a la parte inferior, agrega lo siguiente:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
De esta manera, se configura el contenido del encabezado y el pie de página para que tome automáticamente el tamaño de sus elementos secundarios, y se aplica el espacio restante (1fr) al área principal, mientras que la fila con tamaño auto tomará el tamaño del contenido mínimo de sus elementos secundarios. A medida que aumente el tamaño del contenido, la fila se ajustará para ajustarse.
HTML
<div class="parent">
<header class="section yellow">Header</header>
<main class="section blue">Main</main>
<footer class="section green">Footer Content</footer>
</div>CSS
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
/* Just for parent demo size */
height: 100vh;
}