web-dev-qa-db-ja.com

divをグリッドの2行にまたがるようにする

display: inline-blockと積み重なるブロックの完全なページがあります。 4〜2倍大きくしたいので、float: leftまたはrightを使用して他のブロックを配置しました。

私の問題は、5要素の行がある場合、どのように中央に大きな要素を置くことができるかですそれのうち？ （floatのように、自然に横に置いてください）。

以下はスニペットの例です。

#wrapper{
  width: 516px;
}
.block{
  display: inline-block;
  width: 90px;
  height: 50px;
  margin: 5px;
  background-color: red;
}
.bigger{
  height: 110px;
}
<div id="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

これが、上記のスニペットから取得したいものです Expected

cssflexboxgrid-layoutcss-grid
12
PaulCo

子要素の高さが固定されています（.block）。その情報に基づいて、コンテナーの高さ（#wrapper）を推定できます。

コンテナの高さを知ることにより、レイアウトは CSS Flexbox をflex-direction: columnおよびflex-wrap: wrapとともに使用して実現できます。

コンテナの固定された高さはブレークポイントとして機能し、折り返す場所をflexアイテムに指示します。

#wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 120px;
  width: 516px;
}
.block {
  width: 90px;
  flex: 0 0 50px;
  margin: 5px;
  background-color: red;
}
.bigger {
  flex-basis: 110px;
}
<div id="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

jsFiddle

コンテナに固定の高さ/幅がない場合、フレックスアイテムがラップできない理由は次のとおりです： https://stackoverflow.com/a/43897663/3597276

12
Michael_B

レイアウトをフレックスボックスで機能させるには、ネストされたコンテナを使用するまたはコンテナの高さを知る（ このページの他の回答を参照してください ）。グリッドではそうではありません。コード構造は非常に単純です。

#wrapper {
  display: grid;                                     /* 1 */
  grid-template-columns: repeat(5, 90px);            /* 2 */
  grid-auto-rows: 50px;                              /* 3 */
  grid-gap: 10px;                                    /* 4 */
  width: 516px;
}
.bigger {
  grid-row: 1 / 3;                                   /* 5 */
  grid-column: 2 / 3;                                /* 6 */
}
.block {
  background-color: red;
}
<div id="wrapper">
  <div class="block"></div>
  <div class="block bigger"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

jsFiddle

ノート：

  1. ブロックレベルのグリッドコンテナーを確立します。 （ スペック参照 ）
  2. グリッドに90px幅の列を作成するように指示し、このプロセスを5回繰り返します。 （ スペック参照 ）
  3. グリッド行が暗黙的に（つまり、必要に応じて自動的に）作成されます。各暗黙的な行の高さは50pxである必要があります。 （ スペック参照 ）
  4. グリッドアイテムの周囲の溝。 grip-gapはgrid-row-gapおよびgrid-column-gapの省略形です。（ spec reference ）
  5. 大きなアイテムに行行1から3にまたがるように指示します（2行グリッドには3行行があります）（ spec reference ）。
  6. 大きなアイテムにグリッド列行2から3にまたがるように指示します（5列グリッドには6つの列行があります。）（ spec reference ）

CSSグリッドのブラウザーサポート

  • Chrome-2017年3月8日現在、完全サポート（バージョン57）
  • Firefox-2017年3月6日時点で完全サポート（バージョン52）
  • Safari-2017年3月26日時点で完全にサポート（バージョン10.1）
  • Edge-2017年10月16日時点で完全サポート（バージョン16）
  • IE11-現在の仕様はサポートされていません。廃止されたバージョンをサポート

これが全体像です： http://caniuse.com/#search=grid

7
Michael_B