コンテナの幅を広げると、列のギャップが小さくなるのはなぜですか？

Question

複数列レイアウトの列ギャップの背後にあるロジックを理解するのに苦労しています。このフィドルには次のHTML / CSSがあります：

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
</div>

.flex-container {
  height: 500px;
  width: 300px;
  border: 1px solid blue;
  columns: 120px;
  padding: 10px;
}

.flex-item {
  background: OliveDrab;
  padding: 5px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  break-inside: avoid-column;
}

widthコンテナのを300pxから400pxに変更すると、列間のギャップが実際に縮小することに気付くでしょう。

なぜこれをしているのですか？列が動かないように列を左揃えにすることは可能ですか？CSS列間の固定ギャップは、それが不可能であることを示唆している可能性があります。

Answer 1

列のレイアウトは少し注意が必要です。関連する仕様を読むと、column-width次のことがわかります。

最適な列幅を記述します。実際の列幅は、（使用可能なスペースを埋めるために）広くすることも、（使用可能なスペースが指定された列幅よりも小さい場合のみ）狭くすることもできます。^ref

要素から幅を削除し、コンテナのサイズを変更して、これに注意してください。

.flex-container {
  width: 400px;
  border: 1px solid blue;
  columns: 120px;
  padding: 10px;
  overflow:hidden;
  resize:horizontal;
}

.flex-item {
  background: OliveDrab;
  padding: 5px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  break-inside: avoid-column;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
</div>

ギャップは確かに固定されていますが、列の幅が変化していることがわかります。

アルゴリズムの詳細については、こちらをご覧ください。 https://drafts.csswg.org/css-multicol-1/#pseudo-algorithm

---

解決策は、列幅が固定されたCSSグリッドの使用を検討することです。秘訣は、グリッド列の幅をギャップ+列の幅に等しくなるように定義し、すべての列をコンテナーで埋めるようにすることです（その幅はギャップ+列の幅の乗数になります）

画面のサイズを変更して、結果を確認します。

.container {
  display:grid;
  grid-template-columns:repeat(auto-fit,140px); /* 120 + 20 */
  overflow: hidden;
  resize: horizontal;
  border: 1px solid blue;

}

.flex-container {
  grid-column:1/-1;
  column-width: 120px;
  column-gap: 20px;
  padding: 10px;
}

.flex-item {
  background: OliveDrab;
  padding: 5px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  break-inside: avoid-column;
}

<div class="container">
  <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
    <div class="flex-item">9</div>
    <div class="flex-item">10</div>
  </div>
</div>

Answer 2

column-count（columnsの2番目のパラメーター）を指定しない場合、システムは可能な列の数を計算します（つまり、column-countパラメーターとしてautoを取ります）。

120pxの「理想的な」列幅を指定しましたが、実際のアイテムの幅はそれよりも小さくなっています。したがって、システムは、幅400pxのコンテナに3つの列を入れることができると見なし、それに応じて最初の2つをレイアウトします。

ここにいくつかの情報があります https://developer.mozilla.org/en-US/docs/Web/CSS/column-width

column-width CSSプロパティは、複数列レイアウトの理想的な列幅を設定します。コンテナーには、列幅の値よりも幅が小さい列がなくても、収まる限り多くの列があります。コンテナの幅が指定された値よりも狭い場合、単一の列の幅は宣言された列の幅よりも小さくなります。

列が2つしかないことを確認する場合は、2番目のパラメーターを指定します。

columns: 120px 2;

.flex-container {
  height: 500px;
  width: 400px;
  border: 1px solid blue;
  columns: 120px 2;
  padding: 10px;
}

.flex-item {
  background: OliveDrab;
  padding: 5px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: center;
  break-inside: avoid-column;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
</div>