web-dev-qa-db-ja.com

CSSグリッドレイアウトを使用してすべての列/行にまたがるアイテム

FirefoxとChromeでまもなく出荷されるCSSグリッドレイアウトモジュールを使用して、使用方法を把握しようと考えました。

1つのアイテムaがすべての行の左側に広がり、他のアイテム（b、c、d、eなど）が個々の行の右側にまたがっています。行の右側にまたがる項目の量は可変であるため、b、c、d、eなどの組み合わせがあります。 。、したがって、私はgrid-auto-rowsプロパティを使用しています。そのため、aにまたがる固定行数を定義することはできませんが、aにまたがるall使用可能な行にしたいと思います。

#container {
    display: grid;
    grid-auto-flow: column;
    grid-auto-rows: auto;
    grid-template-columns: [left] 4rem [right] 1fr;
    margin: 0rem auto;
    max-width: 32rem;
}
#a {
    background: lightgreen;
    grid-column: left;
    grid-row: 1 / auto;
    justify-self: center;
}
#b {
    grid-area: auto / right;
    background: yellow;
}
#c {
    grid-area: auto / right;
    background: pink;
}
#d {
    grid-area: auto / right;
    background: lightskyblue;
}
#e {
    background: Plum;
    grid-area: auto / right;
}
<div id="container">
    <div id="a">a</div>
    <div id="b">b</div>
    <div id="c">c</div>
    <div id="d">d</div>
    <div id="e">e</div>
</div>

aがすべての行にまたがるようにするには、行の数がわからない場合はどうすればよいですか？

htmlcssgridcss-grid
21
Marlius

私は同じ状況にあり、きれいな解決策を見つけました。

巨大な行スパン値を使用する代わりに、次を試してください。

    grid-column: 1/-1;

負の数は右からカウントされるため、このコードはグリッド列を最後の列の最後まで指定します。

51
Harry Le

（少なくとも行の最大数になる可能性があると考えている限り）にまたがる行のハッジ値を使用できます：

#container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-rows: auto;
  grid-template-columns: [left] 4rem [right] 1fr;
  margin: 0rem auto;
  max-width: 32rem;
}
#a {
  background: lightgreen;
  grid-column: left;
  grid-row-start: 1;
  grid-row-end: span 1000;/* hudge value ... will at least span so many rows */
  justify-self: center;/* ? what did you mean here ? */
  /* did you mean : */
  display:flex;
  align-items:center;
}
#b {
  grid-area: auto / right;
  background: yellow;
}
#c {
  grid-area: auto / right;
  background: pink;
}
#d {
  grid-area: auto / right;
  background: lightskyblue;
}
#e {
  background: Plum;
  grid-area: auto / right;
}
<div id="container">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
  <div id="e">e</div>
</div>

またはあなたは意味しました：

#container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-rows: auto;
  grid-template-columns: [left] 4rem [right] 1fr;
  margin: 0rem auto;
  max-width: 32rem;
}
#a {
  background: lightgreen;
  grid-column: left;
  grid-row-start: 1;
  grid-row-end: span 1000;/* hudge value ... will at least span so many rows */
  align-self: center;
  justify-self:center
  }
#b {
  grid-area: auto / right;
  background: yellow;
}
#c {
  grid-area: auto / right;
  background: pink;
}
#d {
  grid-area: auto / right;
  background: lightskyblue;
}
#e {
  background: Plum;
  grid-area: auto / right;
}
<div id="container">
  <div id="a">a</div>
  <div id="b">b</div>
  <div id="c">c</div>
  <div id="d">d</div>
  <div id="e">e</div>
</div>

ライブで遊ぶためのコードペン です。

2
G-Cyr