28172 sujets

CSS et mise en forme, CSS3

[KNACSS]Grille 2 colonnes sur réso mobile

Hello les KNACSS !

J'ai décidé d'utiliser KNACSS sur mon projet actuel, mais il y a une chose que je ne comprends pas, la documentation de KNACSS mentionne bien que la grille "se déclenche" après le breakpoint $tiny (= mobile) uniquement mais n'explique pas comment "forcer" une grille en dessous de ce breakpoint.

Voici mon code: Il s'agit de 3 blocs de posts, qui doivent passer à 2 colonnes sur une résolution mobile (breakpoint $tiny). Actuellement, la grille est à 3 colonnes sur desktop, 2 colonnes sur tablette, 1 colonne sur mobile (normal donc). Je voudrais avoir 2 colonnes sur mobile, pas une.

<section class="posts">
    <div class="grid-3-small-2"> <!-- grid-3-small-2-tiny-2 ?? -->
      <article class="post">
        <div class="post__body">
          <h2 class="post__title"></h2>
          <p class="post__description"></p>
        </div>
      </article>
      <article class="post">
        <div class="post__body">
          <h2 class="post__title"></h2>
          <p class="post__description"></p>
        </div>
      </article>
      <article class="post">
        <div class="post__body">
          <h2 class="post__title"></h2>
          <p class="post__description"></p>
        </div>
      </article>
  </div>
</section>


Un idée de comment faire ça simplement ? Je découvre, désolé si la question semble bête.

Merci beaucoup.
Modifié par xxFyl (14 Jan 2017 - 12:07)
Administrateur
Bonjour,

En effet, la grille Grillade de KNACSS s'affiche forcément sur une seule colonne dans un écran de taille inférieure à $tiny (544px de tête).

Il n'y a pas de moyen "naturel" de forcer à deux colonnes, car je considère que sur mobile il n'est pas nécessaire de disposer d'une grille de plusieurs colonnes.

Idées pour réaliser ce que tu souhaites :
- changer la valeur de $tiny (l'abaisser à moins de 544px)
- positionner tes éléments autrement qu'en utilisant Grillade, cf. https://github.com/alsacreations/KNACSS/blob/master/doc/02b-layout-positionnement.md

Bonne chance Smiley smile
Merci beaucoup Raphael.

J'aurais encore une petite question, je ne sais pas trop comment faire cette manip'.

En gros ma page est divisée en 2 colonnes, à gauche un article, à droite une sidebar.

La sidebar doit passer en bas de l'article quand le breakpoint $medium est atteint.

Visiblement par défaut Knacss gère par défaut ce comportement uniquement quand le breakpoint $tiny est atteint.

J'ai donc créé la media-query pour palier à ce manque:

// -md-X suffix means "X columns on medium screen"
// example : .grid-2-md-1
@media (min-width: ($tiny + 1)) and (max-width: $medium) {
  @for $i from 1 through 2 {
    [class*="-md-#{$i}"] {
      & > * {
        width: calc(100% / #{$i} - #{$iefix});
      }
      @each $affix, $size in $grid-gutters {
        &.has-gutter#{$affix} > * {
          width: calc(100% / #{$i} - #{$size} - #{$iefix});
        }
      }
    }
  }
}


Et ça fonctionne quand j'utilise la classe grid-2-md-1. Le truc, c'est que j'aimerais pouvoir l'utiliser dans ma propre classe que voici:

.site-two-columns--large {
  @extend .grid;
  @include grid(2, 1rem)
  @extend .has-gutter;

  > .first-item {
    @extend .two-thirds;
  }
};


Donc voici ma question: comment faire en sorte d'ajouter le préfixe -md-x à ma classe sans que celui-ci soit visible dans le nom ?

Merci beaucoup.
Modifié par xxFyl (19 Jan 2017 - 14:06)
Sujet clos
Aller à