🖖 Inicio

QUÉ ES KUWORKING?

Salir

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
minmax / grid-auto-
display: grid;
grid-template-rows: repeat(2, minmax(50px, auto));
grid-template-columns: 1fr auto 1fr;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
KUWorking
KuWoRKiNG
KWRKG
kWRkg
kwrkg
kWRKg
display: grid;
grid-template-rows: repeat(2, minmax(50px, auto)) 100px;
grid-template-columns: 1fr auto 1fr;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
KUWorking
KuWoRKiNG
KWRKG
kWRkg
kwrkg
kWRKg
display: grid;
grid-template-rows: minmax(50px, auto)) 100px;
grid-template-columns: 1fr auto 1fr;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
KUWorking
KuWoRKiNG
KWRKG
kWRkg
kwrkg
kWRKg
display: grid;
grid-template-rows: minmax(50px, auto));
grid-template-columns: 1fr auto 1fr;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
KUWorking
KuWoRKiNG
KWRKG
kWRkg
kwrkg
kWRKg
display: grid;
grid-template-rows: repeat(2, minmax(50px, auto)) 100px;
grid-auto-rows: minmax(50px, auto));
grid-template-columns: 1fr auto 1fr;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
KUWorking
KuWoRKiNG
KWRKG
kWRkg
kwrkg
kWRKg
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
justify / align items
display: grid;
grid-auto-rows: minmax(50px, auto);
grid-template-columns: 1fr 1fr 1fr;
justify-items: stretch;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
display: grid;
grid-auto-rows: minmax(50px, auto);
grid-template-columns: 1fr 1fr 1fr;
justify-items: start;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
display: grid;
grid-auto-rows: minmax(50px, auto);
grid-template-columns: 1fr 1fr 1fr;
justify-items: center;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
display: grid;
grid-auto-rows: minmax(50px, auto);
grid-template-columns: 1fr 1fr 1fr;
justify-items: end;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
display: grid;
grid-auto-rows: minmax(50px, auto);
grid-template-columns: 1fr 1fr 1fr;
align-items: stretch;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
display: grid;
grid-auto-rows: minmax(50px, auto);
grid-template-columns: 1fr 1fr 1fr;
align-items: start;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
display: grid;
grid-auto-rows: minmax(50px, auto);
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
display: grid;
grid-auto-rows: minmax(50px, auto);
grid-template-columns: 1fr 1fr 1fr;
align-items: end;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
justify / align content
display: grid;
height: 150px;
grid-auto-rows: 50px;
grid-template-columns: repeat(3, 100px);
justify-content: start;
align-content: start;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
display: grid;
height: 150px;
grid-auto-rows: 50px;
grid-template-columns: repeat(3, 100px);
justify-content: center;
align-content: end;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
display: grid;
height: 150px;
grid-auto-rows: 50px;
grid-template-columns: repeat(3, 100px);
justify-content: end;
align-content: center;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
display: grid;
height: 150px;
grid-auto-rows: 50px;
grid-template-columns: repeat(3, 100px);
justify-content: space-evenly;
align-content: space-evenly;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
display: grid;
height: 150px;
grid-auto-rows: 50px;
grid-template-columns: repeat(3, 100px);
justify-content: space-around;
align-content: space-around;
kuworking
kW
KWORK
KWing
KuW
KuWORKing
display: grid;
height: 150px;
grid-auto-rows: 50px;
grid-template-columns: repeat(3, 100px);
justify-content: space-between;
align-content: space-between;
kuworking
kW
KWORK
KWing
KuW
KuWORKing

Newsletter de kuworking, un correo de tanto en cuanto

Privacidad
by kuworking.com
[ 2020 >> kuworking ]