CSSGRID-グリッドテンプレート-空のセルと自動配置のある領域

debugcn 投稿 Dev

フレッド

cssグリッドレイアウトモジュールを使用して、12列-3行のグリッドを表示しようとしています。

2つの要素（グリッドの左側に1つ、右側に2つ）のみを表示するには、1番目の行が必要です。私はそれらを空のセルで10周期を使用して分離しました。

次に、残りの要素を自動的に表示するために次の行が必要です。

grid-template-areas配置をより細かく制御することにしましたがgrid-area、すべての要素に特定の名前を付ける必要があるため、最善のアプローチではない可能性があります。

また、残りのセルにauto grid-areaプロパティを使用して、3行目を自動的に埋めようとすると、最初の行の空のセルが埋められているように見えます。

この問題を解決するための最も効果的な方法は何でしょうか？

これが私のコードです：

.grid {
  display: grid;
  grid-template-areas: 
  	"elem1 . . . . . . . . . . elem2" 
  	"elem3 elem4 elem5 elem6 elem7 elem8 elem9 elem10 elem11 elem12 elem13 elem14";
}
.elem{
	text-align: center;
	color: white;
}
.elem1 {
  background-color: blue;
  grid-area: elem1;
}
.elem2 {
  background-color: red;
  grid-area: elem2;
}
.elem3 {
  background-color: cyan;
  grid-area: elem3;
}
.elem4 {
  background-color: green;
  grid-area: elem4;
}
.elem5 {
  background-color: magenta;
  grid-area: elem5;
}
.elem6 {
  background-color: blue;
  grid-area: elem6;
}
.elem7 {
  background-color: red;
  grid-area: elem7;
}
.elem8 {
  background-color: cyan;
  grid-area: elem8;
}
.elem9 {
  background-color: green;
  grid-area: elem9;
}
.elem10 {
  background-color: magenta;
  grid-area: elem10;
}
.elem11 {
  background-color: blue;
  grid-area: elem11
}
.elem12 {
  background-color: red;
  grid-area: elem12;
}
.elem13 {
  background-color: cyan;
  grid-area: elem13;
}
.elem14 {
  background-color: green;
  grid-area: elem14;
}
.elem15 {
  background-color: magenta;
  grid-area: auto;
}
.elem16 {
  background-color: green;
  grid-area: auto;
}
.elem17 {
  background-color: magenta;
  grid-area: auto;
}
.elem18 {
  background-color: cyan;
  grid-area: auto;
}
.elem19 {
  background-color: magenta;
  grid-area: auto;
}
.elem20 {
  background-color: blue;
  grid-area: auto;
}

<div class="grid">
  <div class="elem elem1">
    elem1
  </div>
  <div class="elem elem2">
    elem2
  </div>
  <div class="elem elem3">
    elem3
  </div>
   <div class="elem elem4">
    elem4
  </div>
  <div class="elem elem5">
    elem5
  </div>
  <div class="elem elem6">
    elem6
  </div>
  <div class="elem elem7">
    elem7
  </div>
  <div class="elem elem8">
    elem8
  </div>
  <div class="elem elem9">
    elem9
  </div>
  <div class="elem elem10">
    elem10
  </div>
  <div class="elem elem11">
    elem11
  </div>
  <div class="elem elem12">
    elem12
  </div>
  <div class="elem elem13">
    elem13
  </div>
  <div class="elem elem14">
    elem14
  </div>
  <div class="elem elem15">
    elem15
  </div>
  <div class="elem elem16">
    elem16
  </div>
  <div class="elem elem17">
    elem17
  </div>
  <div class="elem elem18">
    elem18
  </div>
  <div class="elem elem19">
    elem19
  </div>
  <div class="elem elem20">
    elem20
  </div>
</div>

どうもありがとう

Paulie_D

デフォルトの grid-auto-flow:rowプロパティを利用して、「1行目-右」divにを使用して開始/終了する場所を指示するだけですgrid-column。

そうすれば、グリッド領域はまったく必要ありません。

結果：

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: row; /*typo corrected*/
}

.elem {
  text-align: center;
  color: white;
}

.elem1 {
  background-color: blue;
}

.elem2 {
  background-color: red;
  grid-column: 12/13;
}

.elem3 {
  background-color: cyan;
}

.elem4 {
  background-color: green;
}

.elem5 {
  background-color: magenta;
}

.elem6 {
  background-color: blue;
}

.elem7 {
  background-color: red;
}

.elem8 {
  background-color: cyan;
}

.elem9 {
  background-color: green;
}

.elem10 {
  background-color: magenta;
}

.elem11 {
  background-color: blue;
}

.elem12 {
  background-color: red;
}

.elem13 {
  background-color: cyan;
}

.elem14 {
  background-color: green;
}

.elem15 {
  background-color: magenta;
}

.elem16 {
  background-color: green;
}

.elem17 {
  background-color: magenta;
}

.elem18 {
  background-color: cyan;
}

.elem19 {
  background-color: magenta;
}

.elem20 {
  background-color: blue;
}

<div class="grid">
  <div class="elem elem1">
    elem1
  </div>
  <div class="elem elem2">
    elem2
  </div>
  <div class="elem elem3">
    elem3
  </div>
  <div class="elem elem4">
    elem4
  </div>
  <div class="elem elem5">
    elem5
  </div>
  <div class="elem elem6">
    elem6
  </div>
  <div class="elem elem7">
    elem7
  </div>
  <div class="elem elem8">
    elem8
  </div>
  <div class="elem elem9">
    elem9
  </div>
  <div class="elem elem10">
    elem10
  </div>
  <div class="elem elem11">
    elem11
  </div>
  <div class="elem elem12">
    elem12
  </div>
  <div class="elem elem13">
    elem13
  </div>
  <div class="elem elem14">
    elem14
  </div>
  <div class="elem elem15">
    elem15
  </div>
  <div class="elem elem16">
    elem16
  </div>
  <div class="elem elem17">
    elem17
  </div>
  <div class="elem elem18">
    elem18
  </div>
  <div class="elem elem19">
    elem19
  </div>
  <div class="elem elem20">
    elem20
  </div>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]