hand Inicio

SERVICIOS

Salir

noched铆a

DESARROLLO WEB con
GATSBY y WORDPRESS

emoji Cursos [24]
emoji Themes Gatsby [5]
emoji Themes WordPress [2]
emoji Blog [83]
emoji Herramientas [11]

Distribuciones grid, ejemplos

0 palabras
1 minutos
February 26, 2020
blogcss

Snippets (o ejemplos pr谩cticos) de css grid

  1. Grid
  2. Ejemplos

Grid

Para organizar contenido, las 2 opciones m谩s omnipresentes que nos proporciona css es el grid y el flex

Un argumento habitual para preferir flex es que hay menos cobertura para el grid

La decisi贸n, IMO, es sencilla, si utilizas grid tienes una cobertura de m谩s del 92% canIUse), mientras que con el flex tienes m谩s del 95%

Equivalentes

Y a partir de aqu铆 cada uno tienes sus ventajas y sus inconvenientes

Bien

Ya escrib铆 acerca del grid aqu铆 y tambi茅n puedes explorar de una manera m谩s gr谩fica su funcionamiento aqu铆

En esta entrada pongo algunos ejemplos de distribuciones concretas, a modo de snippet

Ejemplos

css
.test {
display: grid;
grid-template-columns: 2fr 1fr;
grid-auto-rows: 30px;
grid-column-gap: 3px;
grid-row-gap: 3px;
}
Escritorio
M贸vil
css
.test {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
grid-auto-rows: 30px;
grid-column-gap: 3px;
grid-row-gap: 3px;
}
Escritorio
M贸vil
css
.test {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30px, 100px));
grid-auto-rows: 30px;
grid-column-gap: 3px;
grid-row-gap: 3px;
}
Escritorio
M贸vil
css
.test {
display: grid;
grid-template-columns: minmax(20px, 80px);
grid-auto-rows: 30px;
grid-column-gap: 3px;
grid-row-gap: 3px;
}
Escritorio
M贸vil
css
.test {
display: grid;
grid-template-columns: minmax(10px, 80px) minmax(20px, 1fr);
grid-auto-rows: 30px;
grid-column-gap: 3px;
grid-row-gap: 3px;
}
Escritorio
M贸vil
css
.test {
display: grid;
grid-template-columns: minmax(10px, 80px) minmax(20px, 1fr);
grid-auto-rows: 30px;
grid-column-gap: 3px;
grid-row-gap: 3px;
& > div:first-of-type,
& > div:last-of-type {
grid-column: 1 / span 2;
background: #e9cccc;
}
}
Escritorio
M贸vil
css
.test {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
grid-auto-rows: 30px;
grid-column-gap: 3px;
grid-row-gap: 3px;
& > div:first-of-type,
& > div:nth-of-type(6n + 1) {
grid-column: auto / span 2;
background: #e9cccc;
}
& > div:nth-of-type(3n + 3) {
grid-column: auto / span 4;
background: #e9cccc;
}
}
Escritorio
M贸vil
Qu茅 tal la entrada?
馃憣 Bien 馃檶馃檶
馃憤 Bien, pero algunas cosas podr铆an explicarse mejor 馃槵
馃し鈥嶁檪锔 Da por sentadas demasiadas cosas 馃槖
馃し鈥嶁檪锔 A ver, hay poca chicha 馃槵
馃し鈥嶁檪锔 Los ejemplos no son muy claros 馃檱鈥嶁檪锔
馃し鈥嶁檪锔 No se entiende, est谩 mal escrito 馃憥
鉁嶏笍 Hay errores, rev铆salo en cuanto puedas 馃檹

M谩s entradas

Privacidad
by kuworking.com
[ 2020 >> kuworking ]