Skip to content

Instantly share code, notes, and snippets.

@furenku
Created April 22, 2021 13:29
Show Gist options
  • Select an option

  • Save furenku/51d411c78acb60b750f5dff912613fc3 to your computer and use it in GitHub Desktop.

Select an option

Save furenku/51d411c78acb60b750f5dff912613fc3 to your computer and use it in GitHub Desktop.
HOLY GRAIL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Holy Grail</title>
<!-- style -->
<style>
* {
outline: 1px solid blue;
}
html, body {
/* m0 */
margin: 0;
/* p0 */
padding: 0;
}
.contenedor {
/* w100vw */
width: 100vw;
/* h100vh */
height: 100vh;
display: grid;
grid-template-rows: 4rem 1fr 3rem;
}
.horizontal {
display: grid;
grid-template-columns: 1fr 4fr 1fr;
}
</style>
</head>
<body>
<!-- .contenedor -->
<div class="contenedor">
<!-- header -->
<header>
Cabecera
</header>
<!-- .horizontal -->
<div class="horizontal">
<!-- aside.izquierda -->
<aside class="izquierda">
Izquierda
</aside>
<!-- main -->
<main>
Principal
</main>
<!-- aside.derecha -->
<aside class="derecha">
Derecha
</aside>
</div>
<!-- footer -->
<footer>
Pie
</footer>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment