Diseño de cuadrícula - grid

El módulo CSS Grid ofrece un sistema basado en cuadrículas con filas y columnas, facilitando el diseño sin usar flotadores ni posicionamiento.

display: grid

Un diseño de cuadrícula consiste en un elemento padre con uno o más elementos secundarios.


1
2
3
4
5
6
7
8

grid gap

El espacio entre columnas y filas se denomina gap.


1
2
3
4
5
6
7
8


Líneas de cuadrícula en CSS Grid
lineas_grid.png
1
2
3
4
5
6
7
8

grid-template-areas

<style>
.grid_padre {
  display:grid;
  grid-template-areas:
  'header header header header header'
  'nav main main main aside'
  'nav footer footer footer footer';
}

.area1 {grid-area: header;}
.area2 {grid-area: nav;}
.area3 {grid-area: main;}
.area4 {grid-area: aside;}
.area5 {grid-area: footer;}

</style>

<div class="grid_padre">
  <div class="area1">cabecera</div>
  <div class="area2">navegación</div>
  <div class="area3">contenido</div>
  <div class="area4">relacionado</div>
  <div class="area5">pie</div>
</div>

cabecera
navegación
contenido
relacionado
pie


<style>
.grid_padre {
  display:grid;
  grid-template-areas:
  'header header header header header'
  'nav main main main aside'
  'nav main main main aside'
  'nav footer footer footer aside';
}

.area1 {grid-area: header;}
.area2 {grid-area: nav;}
.area3 {grid-area: main;}
.area4 {grid-area: aside;}
.area5 {grid-area: footer;}

</style>

<div class="grid_padre">
  <div class="area1">cabecera</div>
  <div class="area2">navegación</div>
  <div class="area3">contenido</div>
  <div class="area4">relacionado</div>
  <div class="area5">pie</div>
</div>

cabecera
navegación
contenido
relacionado
pie