web-dev-qa-db-ja.com

オートフィルコンテナー内のグリッドアイテムの中央揃え

2つのアイテムでグリッドを設定しました。このグリッドには任意の数のアイテムを含めることができますが、この例では2つで十分です。

バックグラウンド

この例では、左に揃えられた2つの灰色のボックスがあります。ワイド画面（1000px以上）でインスペクターを使用すると、残りのスペースを埋める3番目（またはそれ以上）の「シャドウ」アイテムを見つけることができます。

質問

ボックスをグリッドの中央に配置するにはどうすればよいですか？ 「影」のようなアイテムは存在しません。

.grid要素自動メディアクエリを記述する必要がないため、グリッドを引き続き使用します。ラッパーで、何でも行きます。

また、固定幅はオプションではありません。

.wrap {
  display: flex;
  flex-direction: column;
  /*justify-content: center;
      align-items: center;*/
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 1rem;
}

.item {
  background: #eee;
}
<div class="wrap">
  <div class="grid">
    <div class="item">
      Item 1
    </div>
    <div class="item">
      Item 2
    </div>
  </div>
</div>

Fiddle

https://jsfiddle.net/1ymkg327/4/

htmlcsscenteringcss-grid
9
Jens Törnell

Flexbox

フレックスアイテムはグリッドアイテムのような個々のトラック（列/行）に限定されないため、問題に対する最も効率的な解決策はおそらくフレックスボックスです。

_.grid {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

.item {
  flex: 1 0 100px;
  background: #eee;
  text-align: center;
  border: 1px dashed gray;
  box-sizing: border-box;
}_
_<div class="grid">
  <div class="item">Item 1</div>
</div>

<div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

<div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

<div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>_

しかし、グリッドレイアウトを使い続けたい場合は、考慮すべき問題と考えられる解決策を以下に示します。

グリッド

_1fr_

コードで行うように_1fr_と言うと、「すべての空き領域を消費する」を意味します。ただし、空き領域がない場合は、配置できません。

キーワードアライメントプロパティ（つまり、_justify-*_および_align-*_）は、空き領域を分散することによって機能します。左揃え、右揃え、_space-between_、_space-around_、または中央に、空き領域がない場合、それらを配置することはできません。

これはグリッドの動作だけではありません。これは標準のHTML/CSSです。デフォルトでは、divはブロックレベルの要素です。これは、親の100％の幅を占めることを意味します。したがって、divを中央に配置することはできません（デフォルトの設定を上書きしない限り）。

構造

グリッドの列と行は、コンテナー全体に広がります。したがって、_auto-fill_が作成されると、たとえば、3つの列がある場合、後続のすべての行には3つの列があります。

最初の行に3つのグリッドアイテムがあり、2番目の行に2つのグリッドアイテムがある場合でも、2番目の行には3番目の列があり、スペースを占めています。したがって、2番目の行の2つのアイテムを行の中央に配置することはできません。

_auto-fill_

repeat()関数が_auto-fill_または_auto-fit_に設定されている場合、コンテナーはコンテナーをオーバーフローせずにできるだけ多くのグリッドトラックを作成します。

_auto-fill_を使用すると、作成されたすべてのトラックを満たすグリッドアイテムがない場合、これらのトラックが保持されます。基本的に、グリッドレイアウトはアイテムの有無にかかわらず固定されたままです。

あなたはあなたの質問でこれを指摘しました。 2つのグリッドアイテムがありますが、他の「シャドウ」アイテムも存在します。これらの「シャドウ」アイテムはグリッドアイテムではないことに注意してください。それらは空のグリッドセルです。

enter image description here

グリッドセルが空であるため、グリッドアイテムを中央に配置するための空き領域が残っていません。

_auto-fit_

_auto-fit_キーワードは、これ以外は_auto-fill_と同じです（空のトラックは折りたたまれます。

あなたのケースでは、minmax()関数の最大サイズとして_1fr_を設定しているため、余分なスペースが両方のグリッド項目に分散されます。

enter image description here

ここでも、中央揃えはできませんが、今回はfrユニットがすべての空き領域を消費しているためです（上記の_1fr_セクションで説明）。

_justify-content: center_

上記のように、グリッド項目を中央に配置することはできません。これは、整列のためにライン上に使用可能な空きスペースがないためです。

これを回避する1つの方法として、列のサイズを柔軟に変更できますが、_max-content_ではなく_1fr_を使用する代わりに_auto-fit_を使用することができます。

_.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
  justify-content: center;
  grid-gap: 1rem;
}

.item {
  background: #eee;
}_
_<div class="grid">
  <div class="item">Item 1</div>
</div>

<hr>

<div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

<hr>

<div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

<hr>

<div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>_

より詳しい情報

21
Michael_B

問題は、auto-fillを使用すると空の列が大量に作成されるため、justify-items:centerが期待どおりに動作しないことです。

代わりにauto-fitを使用する必要があります。

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 1rem;
    justify-items:center;
}

https://jsfiddle.net/1ymkg327/36/

0
Facundo Corradini