hand Inicio
hand JSBloqs
hand GutenBloqs
Qué?
nochedía

GRID EXAMPLESSome GRID configurations

display: grid;
grid-gap: 5px;
display: grid;
grid-gap: 5px;
grid-template-columns: 90px 50px 120px;
display: grid;
grid-gap: 5px;
grid-template-columns: 1fr 2fr 1fr;
display: grid;
grid-gap: 5px;
grid-template-columns: 50px 2fr 1fr;
display: grid;
grid-gap: 5px;
grid-template-columns: 20% 1fr 3rem;
display: grid;
grid-gap: 5px;
grid-template-columns: auto auto auto;
display: grid;
grid-gap: 5px;
grid-template-columns: 1fr 1fr auto;
display: grid;
grid-gap: 5px;
grid-template-rows: minmax(50px, auto);
grid-template-columns: 1fr auto 1fr;
display: grid;
grid-gap: 5px;
grid-template-rows: minmax(50px, auto);
grid-template-columns: auto auto 1fr;
display: grid;
grid-gap: 5px;
grid-template-columns: auto auto 1fr;

& > div:nth-of-type(2) {
  grid-area: 1 / 2 / span 2 / span 1;
}
& > div:nth-of-type(4) {
  grid-area: 2 / 1 / span 2 / span 1;
}
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
Privacidad
by kuworking.com
[ 2020 >> kuworking ]