Jugant amb CSS Grid— Responsive

CSS temporada 1 capítol 4

Aquest és el quart article d’una sèrie d’articles dedicats al CSS Grid.

1. Introducció
2. Gap
3. Start/end
4. Responsive
5. Àrees
6. Alineació

El codi en si ja és responsiu, perquè les columnes s’adapten automàticament a l’amplada del dispositiu o de la finestra del navegador.

Però sabem que seria un “atrassu” deixar-ho així, ja que el que mola és poder definir mides diferents de cada caixa en funció del dispositiu en el que ho veiem .

Mentida!! en realitat ho adaptem a l’amplada del document i no del dispositiu, però són petites mentides acceptades…oi? 😇

En aquest article no veurem res nou de CSS Grid, ho farem en el següent .Avui farem modificadors per diferents dipositius sobre el nostre component .c-grid.

Com que cada framework té les seves mides per fer els breakpoints, jo també posaré els meus on em doni la gana. Si us hi fixeu potser veieu que molen bastant, o potser penseu que estic flipat, però si de cas en parlem un altre dia, d’acord?

Aquests són els meus breakpoints; si no li agraden, en tinc uns altres. 🎬

Un cop aclarit on faig els talls, i tenint en compte el principi de Mobile first, aquest és el codi que he decidit afegir:

@media only screen and (min-width: 500px) {
  .c-grid__col-1--tablet-up {
    grid-column-start: span 1;
    grid-column-end: span 1;
  }
  .c-grid__col-2--tablet-up {
    grid-column-start: span 2;
    grid-column-end: span 2;
  }
...
  .c-grid__col-11--tablet-up {
    grid-column-start: span 11;
    grid-column-end: span 11;
  }
  .c-grid__col-12--tablet-up {
    grid-column-start: span 12;
    grid-column-end: span 12;
  }
}
@media only screen and (min-width: 1000px) {
  .c-grid__col-1--laptop-up {
    grid-column-start: span 1;
    grid-column-end: span 1;
  }
  .c-grid__col-2--laptop-up {
    grid-column-start: span 2;
    grid-column-end: span 2;
  }
...
  .c-grid__col-11--laptop-up {
    grid-column-start: span 11;
    grid-column-end: span 11;
  }
  .c-grid__col-12--laptop-up {
    grid-column-start: span 12;
    grid-column-end: span 12;
  }
}
@media only screen and (min-width: 1500px) {
  .c-grid__col-1--screen {
    grid-column-start: span 1;
    grid-column-end: span 1;
  }
  .c-grid__col-2--screen {
    grid-column-start: span 2;
    grid-column-end: span 2;
  }
...
  .c-grid__col-11--screen {
    grid-column-start: span 11;
    grid-column-end: span 11;
  }
  .c-grid__col-12--screen {
    grid-column-start: span 12;
    grid-column-end: span 12;
  }
}

Llarg, oi? I això que hem posat punt suspensius per no tornar-vos bojos. Mirem-ho de fer amb Sass:

@media only screen and (min-width: 500px) {
  @for $i from 1 through 12 {
    .c-grid__col-#{$i}--tablet-up { 
      grid-column-start: span $i;
      grid-column-end: span $i;
    }
  }
}
@media only screen and (min-width: 1000px) {
  @for $i from 1 through 12 {
    .c-grid__col-#{$i}--laptop-up { 
      grid-column-start: span $i;
      grid-column-end: span $i;
    }
  }
}
@media only screen and (min-width: 1500px) {
  @for $i from 1 through 12 {
    .c-grid__col-#{$i}--screen { 
      grid-column-start: span $i;
      grid-column-end: span $i;
    }
  }
}

Bastant més curt! Simplement hem fet uns for per no repetir 12 vegades cada classe, segur que hi podríem escurçar-ho més però no és el nostre objectiu d’avui.

— I com funcionen aquests modificadors? —

És molt senzill, però un exemple s’explica millor:

class="
  c-grid__col-6
  c-grid__col-4--tablet-up
  c-grid__col-3--laptop-up
  c-grid__col-1--screen"

La columna en qüestió ocuparà 6 fraccions en dispositius mòbils, 4 en tauletes, 3 en portàtils i finalment 1 fracció en pantalles grans. Prou clar, oi?

— I per què ara si que podem definir una sola fracció i abans no? —

Si t’he d’explicar això anem malament 😒, però ho faré igualment perquè sóc un tio amb paciència. Sabem que una columna per defecte ocupa sempre una fracció, però si en algun moment definim que n’ocupi més, i volem que torni a ocupar-ne només una en resolucions més grans, cal un modificador per poder tornar a definir una fracció, com és el cas de l’exemple anterior.

Seguint una mica la línia anterior podem crear modificadors responsive per les classes start i end.

Ho fem directament amb Sass, per evitar que sigui un article espagueti.

@media only screen and (min-width: $tablet-min-size) {
  @for $i from 1 through 12 {
    .c-grid__col-start-#{$i}--tablet-up {
      grid-column-start: $i;
    }
    .c-grid__col-end-#{$i}--tablet-up {
      grid-column-end: $i + 1;
    }
  }
}
@media only screen and (min-width: $laptop-min-size) {
  @for $i from 1 through 12 {
    .c-grid__col-start-#{$i}--laptop-up {
      grid-column-start: $i;
    }
    .c-grid__col-end-#{$i}--laptop-up {
      grid-column-end: $i + 1;
    }
  }
}
@media only screen and (min-width: $screen-min-size) {
  @for $i from 1 through 12 {
    .c-grid__col-start-#{$i}--screen {
      grid-column-start: $i;
    }
    .c-grid__col-end-#{$i}--screen {
      grid-column-end: $i + 1;
    }
  }
}

També podem fer modificadors pel gap.

@media only screen and (min-width: $tablet-min-size) {
  .c-grid--tiny-gap--tablet-up {
    grid-gap: $tiny-gap-size;
  }
  .c-grid--small-gap--tablet-up {
    grid-gap: $small-gap-size;
  }
  .c-grid--medium-gap--tablet-up {
    grid-gap: $medium-gap-size;
  }
  .c-grid--large-gap--tablet-up {
    grid-gap: $large-gap-size;
  }
  .c-grid--huge-gap--tablet-up {
    grid-gap: $huge-gap-size;
  }
}
@media only screen and (min-width: $laptop-min-size) {
  .c-grid--tiny-gap--laptop-up {
    grid-gap: $tiny-gap-size;
  }
  .c-grid--small-gap--laptop-up {
    grid-gap: $small-gap-size;
  }
  .c-grid--medium-gap--laptop-up {
    grid-gap: $medium-gap-size;
  }
  .c-grid--large-gap--laptop-up {
    grid-gap: $large-gap-size;
  }
  .c-grid--huge-gap--laptop-up {
    grid-gap: $huge-gap-size;
  }
}
@media only screen and (min-width: $screen-min-size) {
  .c-grid--tiny-gap--screen {
    grid-gap: $tiny-gap-size;
  }
  .c-grid--small-gap--screen {
    grid-gap: $small-gap-size;
  }
  .c-grid--medium-gap--screen {
    grid-gap: $medium-gap-size;
  }
  .c-grid--large-gap--screen {
    grid-gap: $large-gap-size;
  }
  .c-grid--huge-gap--screen {
    grid-gap: $huge-gap-size;
  }
}

En definitiva, es tracta d’anticipar-se i crear els modificadors per a totes aquelles variacions habituals que voldrem diferenciar entre dispositius. Per exemple el cas del gap, que segurament serà diferent sempre entre una pantalla d’ordinador i un smartphone.

En el proper article deixarem de banda aquest component creat, i que ja el podeu utilitzar en els vostres projectes si us ve de gust, i començarem a jugar amb les àrees i els seus noms.