Gridlayout en CSS3

En este Tutoriales En Linea les traemos este truco de efecto de Grid que son fundamentales para el diseño de layouts. Gridlayout en CSS3.
CSS Grid es un sistema de diseño bidimensional creado específicamente para abordar las interfaces de usuario basadas en cuadrícula en la web.

Las Grid son fundamentales para el diseño de layouts. A lo largo de la vida relativamente corta de la web, los desarrolladores han estado probando todo tipo de métodos y trucos para disponer el contenido en el navegador. Comenzamos sin manera de hacer el diseño de página, a diseños basados en tablas, seguidos de diseños basados en tablas. Pero esos enfoques eran, en el mejor de los casos, soluciones alternativas, porque ni las tablas ni los elementos flotantes estaban destinados a ser utilizados como verdaderas herramientas de diseño. Leer Más...

<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 admitir 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>

Ver resultados

<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>

Ver resultados

Artículos Relacionados

Comentarios