- 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
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
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
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
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
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.
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
Á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.
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;
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;
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;
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;
}