Flexbox y Grid: Los mejores amigos del maquetador

Title
Description
FLEXBOX Y GRID
LOS MEJORES AMIGOS DEL MAQUETADOR
Mauricio Gelves - @maugelves

Mauricio Gelves
SiteGround Brand Ambassador
WORDCAMPLAPALMAS
WP Freelancer
Lic. en Informática
@maugelves en RRSS

Grid y Flex
Los mejores amigos del maquetador
@maugelves - #WCLasPalmasGC
¿Cómo hemos llegado hasta aquí?
Tropiezos de la era pre-flex-grid
Introducción a Flex y Grid
Demos

Grid y Flex
06 de Agosto 1991
Tim Berners-Lee

Grid y Flex

Grid y Flex
TABLETITIS
Uso desmedido de tablas HTML y/o
frames para bocetar páginas Webs.

Grid y Flex
TABLETITIS
FLASHITIS
Intento fallido de querer ser guays con
una tecnología privada.

Grid y Flex
TABLETITIS
DIVIDITIS
Uso desmedido de DIV’s porque la
Tabletitis era algo pasado de moda.
FLASHITIS

Grid y Flex
TABLETITIS
DIVIDITIS
FLASHITIS
FLOATLEFTITIS
Uso desmedido de Floats y Clears

Grid y Flex
TABLETITIS
DIVIDITIS
FLASHITIS
FRAMEWORKTITIS
960 Grid, Bootstrap, Foundation…
Resultado: Dividitis + Classitis
FLOATLEFTITIS
Uso desmedido de Floats y Clears

Grid y Flex
Flex
Grid

Vs
Piet Mondrian
CSS Grid / Flex
Diseño Victoriano
Flash, Dividitis, Tabletitis, Bootstraptitis…

Grid y Flex
¿Qué es Flex?
¿Qué es Grid?

div.container{
border: 5px dashed #000000;
display: flex;
}
div.box {
border: 3px solid #000000;
height: 100px;
width: 100px;
}

.container{
display: flex;
flex-wrap: wrap;
}

.container{
display: flex;
justify-content: flex-start;
}

.container{
display: flex;
justify-content: flex-end;
}

.container{
display: flex;
justify-content: space-between;
}
Espacio calculado automáticamente por el browser

.container{
display: flex;
justify-content: space-around;
}
El primer y último espacio es la mitad de ancho del
resto de los espacio

.container{
display: flex;
justify-content: space-evenly;
}
El primero, último y espacios interiores se distribuyen
en forma equitativa

.container{
align-items: flex-start;
display: flex;
height: 200px;
}

.container{
align-items: flex-end;
display: flex;
height: 200px;
}

.container{
align-items: center;
display: flex;
height: 200px;
}

.container{
display: flex;
height: 400px;
justify-content: center;
}

.container{
align-items: stretch;
display: flex;
height: 200px;
}
.box {
height: auto; /* Important */
}

.container{
display: flex;
height: 200px;
}
.box:nth-child(3){
align-self: flex-start;
}

.container{
display: flex;
flex-direction: row-reverse;
}

.container{
display: flex;
flex-direction: column;
}

.container{
display: flex;
flex-direction: column-reverse;
}

Columnas Columnas Columnas Columnas Columnas
Filas
Filas
Filas
Filas
gap gap gap gap gap
gap gap gap gap gap
gap gap gap gap gap
gap
gap
gap
gap
gap
gap
gap
gap
gap
gap
gap
gap
gap
gap
gap
gap

¿Quién puede usar grid?
Casi todos los que estamos aquí…

.container{
grid-template-columns: 100px 2fr 1fr;
grid-template-rows: 25% 100px 2fr;
height: 300px;
}
100px 2fr 1fr
25%
100px
2fr

.container{
grid-template-columns: 100px repeat(3, 1fr);
grid-template-rows: 25% repeat(4, 1fr);
}
1fr 1fr 1fr100px
25%
1fr
1fr
1fr
1fr

.container{
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(3, 100px);
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
} header
main empty sidebar
footer
.item-a {
grid-area: header;
}
.item-b {
grid-area: sidebar;
}

.container{
grid-column-gap: 10px;
grid-row-gap: 15px;
}
10px 10px 10px
15px
15px
15px

1 2 3 4 5
2
3
4
5
.item {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}

.item {
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
1 2 3 4 5
2
3
4
5

.item {
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}
1 2 3 4 5
2
3
4
5

.item {
grid-column-start: span 3;
grid-row-start: span 1;
}
1 2 3 4 5
2
3
4
5

1 2 3 4 5
2
3
4
5
.item-01{
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
.item-02 {
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
z-index: 10;
}

.container{
grid-auto-flow: dense;
}
.item{
}
.item.small {
}

.container {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
}

Flex y Grid
Aprende,
diagrama
y maqueta.

¡Muchas gracias!
Mauricio Gelves
WORDCAMPLAPALMAS
@maugelves (Twitter | Instagram | YouTube)

Flexbox y Grid: Los mejores amigos del maquetador

Flexbox y Grid: Los mejores amigos del maquetador

Recommended

More Related Content

Similar to Flexbox y Grid: Los mejores amigos del maquetador

Similar to Flexbox y Grid: Los mejores amigos del maquetador(20)

More from Mauricio Gelves

More from Mauricio Gelves(20)

Recently uploaded

Recently uploaded(20)

Flexbox y Grid: Los mejores amigos del maquetador