Logo DarioBF Experto en WordPress

Layouts con Grid

el no futuro de CSS



@DarioBF




#WCSantander
  • Diseñador UI/UX
  • Maquetador Front-End
  • Diseñador y desarrollador WordPress
  • Desarrollador ActualidadBlog
  • Formador y consultor web
  • Organizador WPCantabria
  • Organizador WordCamp Santander
  • Editor de traducciones es_ES en WordPress

Layouts CSS modernos

  • Floats
  • Inline-block
  • display: table
  • Posicionamiento relativo-absoluto
  • Frameworks, muchos frameworks...

Opciones a futuro para layouts

Los items de un layout se han convertido en una parte muy compleja del mismo

Definiendo el grid

Definir el grid

- display:grid;

Con el grid definido, todos los elementos hijo pasan a ser items

EJEMPLO 2
Ejemplo de display:grid;

Definir el grid

- grid-template-columns: 250px 250px 250px;
- grid-template-rows: 150px 150px 150px;

Con estas propiedades definimos un grid específico. En el ejemplo, 3 columnas y 3 filas

EJEMPLO 2
Ejemplo de las propiedades grid-template-columns y grid-template-rows

Definir el grid

- grid-column-gap
- grid-row-gap
- grid-gap

Con estas propiedades definimos los márgenes o separaciones entre filas, columnas o generales.

EJEMPLO 3
Ejemplo de la propiedad grid-gap

La unidad de medida fr

Definir el grid

La medida fr equivale la unidad de fracción representada. Esto es, representa una fracción del espacio disponible en el container.

En el ejemplo, he creado tres columnas iguales, cada una con una fracción del espacio disponible.

EJEMPLO 4
Ejemplo del mismo grid utilizando la medida fr

Distribución de items en el grid

Conceptos

Línea del grid

Las líneas del grid pueden ser horizontales o verticales. Nos referimos a ellas por el número de orden y se les puede asignar un nombre.

Las líneas del grid se numeran en el orden de lectura natural: de arriba hacia abajo y de izquierda a derecha.

Ejemplo: hemos destacado la línea de columna 3

Ejemplo del mismo grid utilizando la medida fr

Track

Un track es el espacio definido entre dos líneas del grid. Los tracks pueden ser verticales u horizontales (filas o columnas).

Ejemplo: hemos destacado el track comprendida entre las líneas de fila 2 y 3.

Ejemplo del mismo grid utilizando la medida fr

Celda

Una celda es el espacio unitario más pequeño dentro de nuestro grid. Es el espacio entre cuatro líneas del grid. Es como una celda de una tabla.

Ejemplo: hemos destacado la celda entre las líneas de fila 2 y 3 y de columna 2 y 3

Ejemplo del mismo grid utilizando la medida fr

Área

Cualquier area comprendido entre 4 líneas del grid. Puede contener una o más celdas.

Ejemplo: hemos destacado el área comprendido entre las líneas de fila 1 y 3 y columna 2 y 4.

Ejemplo del mismo grid utilizando la medida fr

Distribución de items

Distribución de items

Para distribuir un item en nuestro grid, podemos hacerlo utilizando las propiedades:
- grid-column-start: 2;
- grid-column-end: 4;
- grid-row-start: 1;
- grid-row-end: 3;

EJEMPLO 5
Ejemplo de distribución de items en el grid

Distribución de items

Shorthands:
- grid-column: 2 / 4
- grid-row: 1 / 3

EJEMPLO 6
Ejemplo de distribución de items en el grid

Distribución de items

Shorthands:
- grid-area: 1 / 2 / 3 / 4;

EJEMPLO 7
Ejemplo de distribución de items en el grid

Alinear items

Alinear items

Podemos alinear los items dentro de sus celdas de forma global (aplica a todo el grid).

Propiedades del container:
- Horizontal: justify-items: start | end | center | stretch;
- Vertical: align-items: start | end | center | stretch;

Ejemplo de distribución de items en el grid

Alinear items

Podemos alinear los items dentro de su celda.

Propiedades del item:
- Horizontal: justify-self: start | end | center | stretch;
- Vertical: align-self: start | end | center | stretch;

Ejemplo de distribución de items en el grid

Magia

<div class="wrapper">
  <header class="header"></header>
  <div class="content"></div>
  <div class="sidebar"></div>
  <div class="footer"></div>
</div>
.wrapper {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 4fr 2fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
.header {
  grid-column: 1 / 3;
  grid-row: 1;
}
.content {
  grid-column: 1;
  grid-row: 2;
}
.sidebar {
  grid-column: 2;
  grid-row: 2;
}
.footer {
  grid-column: 1 / 3;
  grid-row: 3;
}
                
<div class="wrapper">
  <header class="header"></header>
  <div class="content"></div>
  <div class="sidebar"></div>
  <div class="footer"></div>
</div>
.wrapper {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-row-gap: 20px;
  grid-template-columns: 4fr 2fr;
  grid-template-areas:
    "header header"
    "content sidebar"
    "footer footer";
}
.header {
  grid-area: header;
}
.content {
  grid-area: content;
}
.sidebar {
  grid-area: sidebar;
}
.footer {
  grid-area: footer;
}
                

Gracias #WCSantander.

Compartir conocimiento es la base para que la Comunidad crezca, espero que hayas aprendido algo con esta ponencia.

Un saludo, @DarioBF.

slides.dariobf.com/WCSantander2017