hand Inicio

SERVICIOS

Salir

nochedía

GRID EXAMPLESExplore GRID options

[ a 20x20 grid with random colors ]
display: grid
display: grid;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
display: inline-grid;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
grid-template-columns
display: grid;
grid-template-columns: 90px 50px 120px;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
display: grid;
grid-template-columns: 1fr 2fr 1fr;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
display: grid;
grid-template-columns: 90px 2fr 1fr;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
display: grid;
grid-template-columns: 20% 1fr 2rem;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
display: grid;
grid-template-columns: auto auto auto;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
display: grid;
grid-template-columns: 1fr 1fr auto;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
minmax
display: grid;
grid-template-rows: minmax(50px, auto);
grid-template-columns: 1fr auto 1fr;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
display: grid;
grid-template-rows: minmax(50px, auto);
grid-template-columns: auto auto 1fr;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
cells that span
display: grid;
grid-template-rows: minmax(50px, auto);
grid-template-columns: 1fr auto 1fr;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
display: grid;
grid-template-rows: minmax(50px, auto);
grid-template-columns: auto auto 1fr;

.item {
  grid-area: 1 / 2 / span 1 / span 2;
}
.item2 {
  grid-area: 2 / 2 / span 2 / span 1;
}
kuworking
kW
KWORK
KWing
KuW
KuWORKing
Privacidad
by kuworking.com
[ 2020 >> kuworking ]