CSS Grid es un sistema de diseño bidimensional creado específicamente para abordar las interfaces de basadas en cuadrícula en la web.
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #64666e;
color: #555;
font-size: 1.1em;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.nav-link {
display: block;
margin-bottom: 0.5em;
}
h3 {
margin-bottom: 0.5em;
}
p {
line-height: 1.5;
margin-bottom: 1em;
}
.container {
margin: 40px auto;
max-width: 700px;
display: grid;
grid-template-columns: 8em auto 8em;
grid-template-rows: 3em auto auto auto 3em;
}
header {
background-color: lemonchiffon;
display: flex;
align-items: center;
justify-content: center;
}
nav {
background-color: mistyrose;
padding: 0.5em;
}
article {
padding: 0.5em;
background: #fff;
}
aside {
background-color: lavender;
padding: 0.5em;
}
footer {
background-color: silver;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
grid-column: 1 / 4;
grid-row: 5;
}
@media screen and (max-width: 479px) {
header {
grid-column: 1 / 4;
}
article {
grid-column: 1 / 4;
grid-row: 2;
}
aside {
grid-column: 1 / 4;
grid-row: 3;
}
nav {
grid-column: 1 / 4;
grid-row: 4;
}
}
@media screen and (min-width: 480px) and (max-width: 639px) {
nav {
grid-column: 1;
grid-row: 2;
}
aside {
grid-column: 1;
grid-row: 3 / 5;
}
article {
grid-column: 2 / 4;
grid-row: 1 / 5;
}
}
@media screen and (min-width: 640px) {
header {
grid-column: 1 / 4;
}
nav {
grid-row: 2 / 5;
grid-column: 1;
}
aside {
grid-row: 2 / 5;
grid-column: 3;
}
article {
grid-row: 2 / 5;
grid-column: 2;
}
}
</style>
<body>
<div class="container">
<header>Header</header>
<article>
<p>“Es muy triste entonces que tantos niños se apresuren y no tengan tiempo para pensar en sí mismos. La gente les dice cuando piensan que han estado jugando el tiempo suficiente: “Ya no eres un niño. Debes comenzar a hacer algo ”. Pero aunque jugar no es hacer nada, realmente estás haciendo algo cuando juegas; estas pensando en ti mismo Muchos niños juegan de la manera equivocada. Hacen funcionar fuera del juego. No solo parecen estar haciendo algo, realmente están haciendo algo. Están imitando a los adultos a su alrededor que siempre están haciendo tanto en lugar de lo menos posible. Y a menudo se les anima a jugar de esta manera por los adultos. Y no están aprendiendo a ser ellos mismos ".</p>
<p>“Hay muchas personas que no son del todo ellas mismas porque de niños no se les dio tiempo para pensar en sí mismos. Y como no saben todo sobre sí mismos, no pueden saberlo todo sobre todo. Pero a nadie le gusta itir que no sabe todo sobre todo. Y así, estas personas tratan de compensar el no saber todo acerca de todo haciendo cosas ".</p>
<p><small>Fuente: <em>Cuatro cartas sin publicar a Catherine </em> por Laura Riding</small></p>
</article>
<nav>
<h3>Navigation</h3>
<a class="nav-link" href="jаvascript:void(0)">Inicio</a>
<a class="nav-link" href="jаvascript:void(0)">Capítulo 1</a>
<a class="nav-link" href="jаvascript:void(0)">Capítulo 2</a>
<a class="nav-link" href="jаvascript:void(0)">Capítulo 3</a>
<a class="nav-link" href="jаvascript:void(0)">Capítulo 4</a>
</nav>
<aside>
<h3>Sidebar</h3>
<p>“Una obra de arte es buena si ha surgido de la necesidad. En esta naturaleza de su origen se encuentra su juicio: no hay otro ".<br>- Rainer Maria Rilke</p>
</aside>
<footer>Footer</footer><style>
.contenedor {
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-rows: repeat(4, 50%);
grid-gap: 10px 10px;
grid-auto-rows: 80px;
}
.celda {
background-color: #4284f3;
}
.uno {
grid-column: 1;
grid-row: 1;
}
.dos {
grid-column: 2;
grid-row: 1;
}
.tres {
grid-column: 1;
grid-row: 2;
}
.cuatro {
grid-column: 2;
grid-row: 2;
}
.cinco {
grid-column: 1;
grid-row: 3;
}
.seis {
grid-column: 2;
grid-row: 3;
}
.siete {
grid-column: 1 / span 2;
grid-row: 4;
}
.ocho {
grid-column: 1;
grid-row: 5;
}
.nueve {
grid-column: 2;
grid-row: 5;
}
</style>
<div class="contenedor">
<div class="celda uno">1</div>
<div class="dos celda">2</div>
<div class="tres celda">3</div>
<div class="cuatro celda">4</div>
<div class="cinco celda">5</div>
<div class="seis celda">6</div>
<div class="siete celda">7</div>
<div class="ocho celda">8</div>
<div class="nueve celda">9</div>
</div>