7
votes

Défilement horizontal avec grille css

J'ai un problème lorsque j'essaie de faire un défilement horizontal alors que la grille remplit quatre colonnes. Voir

#series {
    display: grid;
    grid-gap: 16px;
    overflow-x: scroll;
    padding: 16px;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: column;
}

En utilisant ceci, j'obtiens la sortie ci-dessous

Mais, vous savez, je veux pour obtenir la même chose comme «quatre colonnes» et une barre de défilement pour en savoir plus.

Quel est le problème.

reactjs html css next.js css-grid

6 commentaires

la largeur de chaque colonne doit être dynamique ou en quelque sorte la même que dans l'image ci-dessus?

Non, j'ai essayé d'utiliser grid-template-columns: repeat (auto-fill, minmax (160px, 1fr)); mais tous les autres éléments qui ne peuvent pas être dans l'écran n'apparaissent pas

Pouvez-vous publier un lien jsfiddle ou codepen? Je pense que vous devriez définir le overflow-x: scroll sur le parent de la grille, pas sur la grille.

Je suppose que détecter la largeur d'une grille jusqu'à ce que certains éléments de la grille , mais pas tous, ne soit pas possible; il en va de même pour les boîtes flexibles .

Ceci est mon code codesandbox.io/s/m77m8ory9j mais je ne sais pas pourquoi ne fonctionne pas.

Parce que la taille minimale de votre élément de grille est de 160px, et si vous êtes d'accord pour garder cette taille fixe, vous pouvez utiliser overflow sur un élément wrapper (dont la largeur est quelque chose comme 4 * 160px) de la grille et grid-auto-flow: column comme dans la question.

4 Réponses :

0
votes

Je pense que cet article médiatique a la réponse: https://uxdesign.cc/creating- conteneurs-à-défilement horizontal-dans-la-bonne-voie-grille-css-c256f64fc585

Fondamentalement, cela se résume au fait que les cartes individuelles doivent avoir une largeur fixe au lieu d'une largeur dynamique, afin de forcer le navigateur à ne pas les écraser ensemble.

1 commentaires

Bro, j'ai essayé avec grid-template-columns: repeat (auto-fill, minmax (160px, 1fr)); mais je n'obtiens pas la barre de défilement, c'est la même chose que les autres éléments N'existe pas

3
votes

Conteneurs à défilement horizontal dans le bon sens! Source

<div class="app">
  <h1>Some headline</h1>

  <div class="full hide-scroll">

    <ul class="hs">
      <li class="item">test</li>
      <li class="item">test</li>
      <li class="item">test</li>
      <li class="item">test</li>
      <li class="item">test</li>
      <li class="item">test</li>
    </ul>

  </div>

  <div class="container">
    <div class="item">
      <h3>Block for context</h3>
    </div>
  </div>
</div>

:root {
  --gutter: 20px;
}

.app {
  padding: var(--gutter) 0;
  display: grid;
  grid-gap: var(--gutter) 0;
  grid-template-columns: var(--gutter) 1fr var(--gutter);
  align-content: start;
}

.app > * {
  grid-column: 2 / -2;
}

.app > .full {
  grid-column: 1 / -1;
}

.hs {
  display: grid;
  grid-gap: calc(var(--gutter) / 2);
  grid-template-columns: 10px repeat(6, calc(50% - var(--gutter) * 2)) 10px;
  grid-template-rows: minmax(150px, 1fr);
  
  overflow-x: scroll;
  scroll-snap-type: x proximity;
  padding-bottom: calc(.75 * var(--gutter));
  margin-bottom: calc(-.5 * var(--gutter));
}

.hs:before,
.hs:after {
  content: '';
}

/* Hide scrollbar */
.hide-scroll {
  overflow-y: hidden;
  margin-bottom: calc(-.1 * var(--gutter));
}


/* Demo styles */

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  background: #456173;
}

ul {
  list-style: none;
  padding: 0;
}

h1,
h2,
h3 {
  margin: 0;
}

.app {
  width: 375px;
  height: 667px;
  background: #DBD0BC;
  overflow-y: scroll;
}

.hs > li,
.item {
  scroll-snap-align: center;
  padding: calc(var(--gutter) / 2 * 1.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 8px;
}

0 commentaires

15
votes

Essayez-le avec ceci:

display: grid;
grid-gap: 16px;
padding: 16px;
grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
grid-auto-flow: column;
grid-auto-columns: minmax(160px,1fr);
overflow-x: auto;

grid-auto-flow: column; forcera la grille à ajouter vos éléments en tant que colonne au lieu de suivre l'espace libre .

grid-auto-columns: minmax (160px, 1fr); les éléments ajoutés en dehors de la fenêtre ne correspondent pas à l'ajustement automatique, ils n'auront donc pas la taille définie dans votre modèle. Il faut donc le redéfinir avec grid-auto-columns.

overflow-x: auto; auto ajoutera la barre de défilement

1 commentaires

Quand j'ai essayé de le faire à l'intérieur d'un div qui est placé dans un en-tête avec position: collant toute la page est défilée

0
votes

Votre problème est que vous utilisez l'unité 1fr. Au lieu de cela, mettez 25% (utilisez calc pour tenir compte des lacunes). Cela dimensionnera vos colonnes par rapport à la largeur d'écran disponible. Bien sûr, vous devez également appliquer 25% aux colonnes automatiques de grille.

0 commentaires