web-dev-qa-db-ja.com

CSSグリッドの最後の行で要素を中央に配置する方法は？

私はこのようないくつかのアイテムをレイアウトするためにCSSグリッドを使用しています...

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

最後の行を左揃えではなく中央揃えにするにはどうすればよいですか？アイテムの数を保証することはできませんので、任意の数のアイテムに対してレイアウトを適切に見せたいです。

これは、代わりにflexboxを使用する必要がありますか？またはCSSグリッドは適切な使用ですか？

htmlcsscss3flexboxcss-grid
16
fightstarr20

最も簡単な解決策は、justify-content: centerでflexboxを使用することです。

これにより、すべてのアイテムが行の水平方向の中央にパックされます。それからあなたのマージンはそれらを押しのけます。

いっぱいになった行では、 動作するための空きスペースがない なので、justify-contentは効果がありません。

空きスペースのある行（この場合、最後の行のみ）では、センタリングが発生します。

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

それはグリッドシステムの目的を無効にします。グリッドは、スプレッドシートのようにすべてがXとYの値を持つ2次元配列です。

はい、アイテムをラップするシステムが必要です。 Flexboxは、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/

これにより、子は使用可能なすべてのスペースを占有します。行がいっぱいになると、そのスペースはなくなり、標準サイズになります。

コンテナのサイズを自動的に変更する場合は、widthプロパティを削除すると、コンテナとそのアイテムのサイズが自動的に変更されます。それも同様ですが、行のアイテムの量を定義したいと思います。

8
JackHasaKeyboard

最後の行を前の行とは異なる動作にする特定のプロパティはありません。

それでも、nビューポートの幅内のアイテムに一致するセット幅を定義するという事実に基づいて、Flexboxとそのjustify-contentプロパティ。

centerに設定すると、任意の数のアイテムの最後の行が中央に配置されます。

スタックスニペット

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

これは、フレックスを使用せずに行内のアイテムを中央に配置する必要があります

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

これは私の解決策です（2018年4月23日現在）：

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

グリッドラッパーの最下部の中央にアイテムを配置できます。繰り返しになりますが、他のすべてのソリューションと同様に、グリッドラッパー内に何かを配置して最後の行の中央に揃えることはできません。

しかし、少なくともこれは回避策として優れた代替ソリューションです。

0
tom_mai78101