Me he planteado este posible layout donde el Header y el Footer sean opcionales, aunque me surje la duda de la colocación del Footer al ir en segundo lugar en vez del último
Código HTML:
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Grid</title>
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/color-full.css">
</head>
<body>
<header>Header</header>
<footer>Footer</footer>
<aside>Aside</aside>
<main>Main</main>
<aside>Aside</aside>
</body>
</html>
Código:
body {
margin: 0;
display: flex;
flex-wrap: wrap;
height: 100%;
}
body >* {
box-shadow: 0 0 0 1px #f00;
}
body header,
body footer {
line-height: 3em;
width: 100%;
}
body aside,
body main {
flex: 1;
height: calc(100% - 0em);
}
body header:only-of-type~aside,
body footer:only-of-type~aside,
body header:only-of-type~main,
body footer:only-of-type~main {
height: calc(100% - 3em);
}
body header:only-of-type~footer:only-of-type~aside,
body header:only-of-type~footer:only-of-type~main {
height: calc(100% - 6em);
}
body footer {
order: 2;