[Grillade] Garder les goutières en dessous de 480px

[ghost]

Bonjour, Je me demandais si il y avait un moyen de garder les gouttières en dessous de 480px avec Grillade.

[raphaelgoetter]

Bonjour,

Techniquement c'est possible (il suffirait de renseigner la valeur 0 à la variable $tiny dans le fichier de variables : https://github.com/alsacreations/KNACSS/blob/master/sass/_config/_variables.scss#L9)

Mais en pratique, es-tu vraiment sûr d'avoir besoin d'un système de grille sur un mini écran ? Rien ne t'empêche d'utiliser les positionnements tels que Flexbox pour ce genre de besoins, surtout si c'est pour deux simples "colonnes" : https://knacss.com/styleguide.html#flexbox

[ghost]

Bonjour, Je pense que vous n'avez pas bien compris, en faites j'ai deux colonnes avec du coup un espacement entre les deux grâce à la gouttière. Une fois la taille de l'écran de 480 px atteint je veux justement que cette grille s'annule et que les éléments soient mis en dessous des autres tout en concervant un espace entre la colonne qui se place en dessous et celle en qui se place au dessus.

[raphaelgoetter]

Bonjour,

Je pense pourtant avoir compris la situation, mais mon avis reste le même : je suis convaincu qu'utiliser un framework, voire une grille, pour un usage de ce type relève de l'usine à gaz.

Ce genre de comportement est réalisable en quelques lignes (ici en SCSS, mais facilement transposable en CSS) :

.container {
  display: grid;
  grid-gap: 1em;

  @media (min-width: $tiny) {
    grid-template-columns: 1fr 1fr;
  }
}

Démo : https://codepen.io/raphaelgoetter/pen/KZxvPN?editors=1100

[PhilippeVay]

*`-small-1`** a encore la gouttière horizontale et verticale – s'il y en a une – mais plus de colonne bien entendu.

On a donc une gouttière verticale entre $tiny et $medium avec sur le parent les classes :

<div class="grid-3-small-1 has-gutter-l">
  <div>lorem 1</div>
  <div>lorem 2</div>
</div>

Reste à renseigner la valeur 0 à $tiny© et modifier la limite entre grid-N et small-M si on souhaite une autre valeur que 768px.
La grille est toujours active (au-dessus de 0px) et donc la gouttière verticale également et on a soit N colonnes (viewport large) soit 1 (viewport étroit)

➡️ Codepen