webentwicklung-frage-antwort-db.com.de

Wie zentriere ich Elemente in der letzten Zeile in CSS Grid?

Ich verwende ein CSS-Raster, um einige Elemente wie folgt zu gestalten ...

#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>

Wie kann ich erreichen, dass die letzte Zeile zentriert anstatt linksbündig ausgerichtet wird? Ich kann nicht garantieren, dass die Anzahl der Elemente so ist, dass das Layout für eine beliebige Anzahl von Elementen richtig aussieht.

Ist dies etwas, für das ich stattdessen die Flexbox verwenden sollte? Oder sind CSS-Grids eine geeignete Verwendung?

10
fightstarr20

Ich denke, die einfachste Lösung wäre, Flexbox mit justify-content: center zu verwenden.

Dadurch werden alle Elemente in der horizontalen Mitte der Zeile gepackt. Dann drücken Sie Ihre Margen auseinander.

In vollständig ausgefüllten Zeilen hat justify-content keine Auswirkungen, da es keinen freien Speicherplatz für die Arbeit gibt .

Bei Zeilen mit freiem Speicherplatz (in Ihrem Fall nur die letzte Zeile) erfolgt die Zentrierung.

#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

Es gibt keine spezifische Eigenschaft, um zu bewirken, dass sich die letzte Zeile anders verhält als die vorherige.

Basierend auf der Tatsache, dass Sie eine festgelegte Breite definieren, die mit n Elementen innerhalb der Breite des Ansichtsfensters übereinstimmt, können Sie Flexbox und seine justify-content-Eigenschaft verwenden.

Wenn Sie center setzen, wird die letzte Zeile für eine beliebige Anzahl von Elementen zentriert.

Stapelschnipsel

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

Dies sollte jedes Element in der Reihe zentrieren, ohne flex zu verwenden

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

Das macht den Zweck eines Netzes zunichte. Ein Raster ist ein zweidimensionales Array, in dem alles einen X- und Y-Wert hat, wie bei einer Kalkulationstabelle.

Ja, Sie möchten ein System, in dem die Elemente verpackt werden. Flexbox passt hier wegen 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/

Auf diese Weise nehmen die Kinder den gesamten verfügbaren Platz ein. Wenn die Zeile voll ist, ist sie leer und die Standardgröße.

Wenn Sie möchten, dass die Größe des Containers automatisch angepasst wird, entfernen Sie die width -Eigenschaft. Die Größe des Containers und seiner Elemente wird automatisch geändert. Es ist gut so, aber ich gehe davon aus, dass Sie die Anzahl der Elemente in einer Reihe definieren möchten.

3

Dies ist meine Lösung (Stand: 23. April 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>

Sie können jedoch Elemente in der Mitte ganz unten im Rasterwickler positionieren. Wie bei allen anderen Lösungen können Sie auch nicht etwas in einen Gitter-Wrapper einfügen, der in der letzten Reihe zentriert wird. 

Zumindest ist dies eine gute alternative Lösung als Problemumgehung.

0
tom_mai78101