web-dev-qa-db-fra.com

Comment centrer les éléments sur la dernière ligne de la grille CSS?

J'utilise une grille CSS pour mettre en page des éléments comme celui-ci ...

#container {
  display: grid;
  grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
}

.item {
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}
<div id="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

Comment puis-je centrer la dernière ligne au lieu de l'aligner à gauche? Je ne peux pas garantir le nombre d'éléments, je souhaite donc que la mise en page corresponde à n'importe quel nombre d'éléments.

Est-ce que c'est quelque chose que je devrais plutôt utiliser avec flexbox? Ou les grilles CSS sont-elles une utilisation appropriée?

htmlcsscss3flexboxcss-grid
10
fightstarr20

Je pense que la solution la plus simple serait d’utiliser flexbox avec justify-content: center.

Cela regroupe tous les éléments dans le centre horizontal de la rangée. Ensuite, vos marges Les séparer.

justify-content n'aura aucun effet sur les lignes entièrement remplies car il n'y a pas d'espace libre pour que cela fonctionne .

Le centrage est effectué sur les lignes avec de l'espace libre (dans votre cas, seule la dernière ligne).

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  flex: 0 0 calc(16.66% - 20px);
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}

* {
  box-sizing: border-box;
}
<div id="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

7
Michael_B

Il n’existe pas de propriété spécifique permettant de faire en sorte que la dernière ligne se comporte différemment de la précédente.

Néanmoins, étant donné que vous définissez une largeur définie qui correspond aux éléments n de la largeur de la fenêtre, vous pouvez utiliser Flexbox et sa propriété justify-content.

Réglez-le sur center et il centrera la dernière ligne pour un nombre quelconque d'éléments.

Extrait de pile

html, body {
  margin: 0;
}

#container {
  display: flex;
  flex-wrap: wrap;                  /*  allow items to wrap  */
  justify-content: center;          /*  horizontally center items  */
}

.item {
  flex-basis: calc(16.666% - 20px); /*  subtract the margin from the width  */
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
  box-sizing: border-box;           /*  make padding be included in the set width  */
}
<div id="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

4
LGSon

Cela devrait centrer n'importe quel article dans la rangée sans utiliser flex

.center-item {
    grid-column: 1 / -1;
}
4
Jalal

Cela va à l'encontre de l'objectif d'un système de grille. Une grille est un tableau à 2 dimensions où tout a une valeur X et Y, comme une feuille de calcul.

Oui, vous voulez un système où les articles sont emballés. La Flexbox convient ici à cause de flex-wrap.

#container {
  padding: 10px;
  width: calc((100px + (10px * 2)) * 4); /* item width + padding on either side times number of items */
  display: flex;
  flex-wrap: wrap;
  background: blue;
  margin: 10px;
}

#container div {
  width: 100px;
  height: 100px;
  flex-grow: 1;
  background: red;
  margin: 10px;
}

https://jsfiddle.net/0c0hzh8t/

Cela fait que les enfants occupent tout l'espace disponible. Si la ligne est pleine, sa taille sera nulle et sa taille standard.

Si vous souhaitez que le conteneur soit automatiquement dimensionné, supprimez la propriété width et le conteneur et ses éléments seront redimensionnés automatiquement. C'est tout aussi bien, mais je suppose que vous voulez définir le nombre d'éléments dans une ligne.

3
JackHasaKeyboard

Voici ma solution (à compter du 23 avril 2018):

#wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 0;
  grid-column-gap: 15px;
  padding: 15px 15px 0 15px;
}

.item {
  border: 1px solid #000;
  height: 200px;
  margin-bottom: 15px;
}
<div style="width: 100%; margin: 0 auto; text-align: center; vertical-align: middle;">
  <div style="overflow: auto; height: 400px; margin-top: 15px;">
    <div style="position: relative">
      <div id="wrapper">
        <div class="item"><div>Item 1</div></div>
        <div class="item"><div>Item 2</div></div>
        <div class="item"><div>Item 3</div></div>
        <div class="item"><div>Item 4</div></div>
        <div class="item"><div>Item 5</div></div>
        <div class="item"><div>Item 6</div></div>
        <div class="item"><div>Item 7</div></div>
        <div class="item"><div>Item 8</div></div>
      </div>
      <div style="position: absolute; bottom: -30px; text-align: center; margin: 0 auto; width: 100%;">
        <div style="background-color: #defabc; width: 300px; margin: 0 auto; text-align: center; cursor: pointer;">
          <span style="color: #000;">See all items</span>
        </div>
      </div>
    </div>
  </div>
</div>

Cela permet de positionner les éléments au centre, tout en bas de la grille. Encore une fois, comme pour toutes les autres solutions, vous ne pouvez pas insérer quelque chose dans un wrapper de grille pour qu'il soit centré dans la dernière ligne. 

Mais au moins c'est une bonne solution de rechange comme solution de contournement.

0
tom_mai78101