web-dev-qa-db-ja.com

グリッド列を行全体に広げます

2つのCSSグリッドコンテナーがあり、動的な幅に基づく列カウントがあるとします。

display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

グリッドは完全に機能しますが、上記のコードの別のグリッドと同じように最初の列を持つために別のグリッドが必要な場合、より多くのセルにまたがる別の列-セルの数に応じて現在の行。

問題をよりよく理解するために、画像があります：

TargetDesign

より狭いラッパーの場合：

TargetDesign2

grid-column: span ALL（そのようなものが存在する場合）のようなものを適用する必要があります。つまり、ALL =現在の行の終わりまでです。

本当に重要なのは、「最初の」列が常に「1」の列と整列する必要があるということです。

例を実行するコードは次のとおりです。

.grid div {
  /* Not important fancy styles */
  height: 40px;
  text-align: center;
  padding-top: 20px;
}

.grid {
  width: 350px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  background-color: silver;
}

.grid-second {
  background-color: red;
}

.grid-another {
  background-color: purple;
  border: 1px solid gray;
}
<div class="grid">
  <div class="grid-first">
    First
  </div>
  <div class="grid-second">
    Second (Want till end)
  </div>
</div>
<!-- Another same grid -->
<div class="grid">
  <div class="grid-another">
    1
  </div>
  <div class="grid-another">
    2
  </div>
  <div class="grid-another">
    3
  </div>
  <div class="grid-another">
    4
  </div>
</div>

PS。 しないメディアクエリを使用してソリューションを投稿してください。私は、メディアクエリを使用せずに動作する任意の（ちょっとしたハッキン​​グソリューションでも）に興味があります。

csscss3gridcss-grid
12
Jurosh

CSSグリッド仕様には、次の2つの興味深いセクションがあります。

7.1。明示的グリッド

グリッド配置プロパティの数値インデックスは、明示的なグリッドの端からカウントされます。正のインデックスは開始側からカウントされ、負のインデックスは終了側からカウントされます。

ここもまた...

8.3。行ベースの配置：grid-row-start、grid-column-start、grid-row-end、およびgrid-column-endプロパティ

負の整数が指定された場合、代わりに、明示的なグリッドの端から開始して逆方向にカウントします。

つまり、explicit gridを扱う場合、これらのプロパティで定義されたグリッドを意味します。

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid（上記の3つのプロパティの短縮形、 とりわけ ）

...次のルールを設定して、すべての列にグリッド領域を作成を実行できます。

grid-column: 1 / -1;

これは、グリッド領域に最初の列の行から最後の列の行にまたがるように指示します。

「grid-column: span ALL（そのようなものが存在する場合）のようなものを適用する必要があります。つまり、ALL =現在の行の終わりまでです。」

jsFiddleデモ

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

.grid-second {
  grid-column: 2 / -1;
  background-color: red;
}


/* Not important fancy styles */

.grid div {
  height: 40px;
  text-align: center;
  padding-top: 20px;
}

.grid-another {
  background-color: purple;
  border: 1px solid gray;
}
<div class="grid">
  <div class="grid-first">First</div>
  <div class="grid-second">Second (Want till end)</div>
</div>
<!-- Another same grid -->
<div class="grid">
  <div class="grid-another">1</div>
  <div class="grid-another">2</div>
  <div class="grid-another">3</div>
  <div class="grid-another">4</div>
  <div class="grid-another">1</div>
  <div class="grid-another">2</div>
  <div class="grid-another">3</div>
  <div class="grid-another">4</div>
  <div class="grid-another">1</div>
  <div class="grid-another">2</div>
  <div class="grid-another">3</div>
  <div class="grid-another">4</div>
</div>
24
Michael_B