CSSグリッドレイアウトでのアイテムの移動[ガイド]
を使う CSSグリッドレイアウトモジュール Webデザインでは、より多くのブラウザが登場するにつれて、ますます実現可能になります。 それを支える. グリッドセルを埋めるレイアウトを作成している間に、もっと複雑なことを達成したい場合があるかもしれません。.
たとえば、 少し動き回る いくつかのグリッド項目は、それらのグリッド領域で立ち往生していました。あなたもしたいかもしれません それらをグリッドコンテナから移動します （オーバーフロー）、または お互いに （オーバーラップ）、または単に...周りの空きスペースに.
だから、この記事では、私はあなたができる方法を紹介します グリッド項目の移動、順序付け、オーバーフロー、オーバーラップ、およびサイズ変更 CSSグリッドレイアウトモジュールを使用するとき.
CSSグリッドを作成する
まず、簡単なCSSグリッドを作成しましょう。 1行3列.
HTMLでは、グリッドコンテナが配置されたdivの束を作成します。 3つのグリッド項目を含みます.
CSSでは、グリッドコンテナ 持っています 表示：グリッド。 財産 グリッド項目 持ってる グリッドエリア グリッド項目領域の名前を識別する.
私達も を追加 グリッドテンプレート領域 財産 グリッド領域の名前が使用されるグリッドコンテナへ グリッド領域をそれらが表すグリッドセルに割り当てる.
すべての列 1分数のサイズをとる（fr） グリッドアイテムの包含を確実にするコンテナ幅の.
.grid-container display：grid;グリッドテンプレート領域： 'left center right'; grid-template-columns：repeat（3、1fr）; grid-template-rows：80ピクセル。グリッドギャップ：5px。幅：360ピクセル。背景色：マゼンタ。 grid-area：left;。グリッド中心：グリッド領域：中心。 grid-area：right;。 グリッドコンテナdiv 背景色：薄緑色;
オーバーフローグリッド項目
あなたはグリッドアイテムを作ることができます グリッドコンテナをオーバーフローさせる レイアウトに必要な場合オーバーフロー効果を達成するためには、あなたがする必要があるだけです 異なる列サイズを使用する：
.grid-container display：grid;グリッドテンプレート領域： 'left center right'; grid-template-columns：repeat（3、150px）;グリッドギャップ：5px。
の 列サイズとギャップサイズの合計 よりも大きいです コンテナの幅, これはグリッドアイテムがそれらのコンテナをオーバーフローさせる原因となります.
重複グリッド項目
A グリッド項目は重なってもかまいません （完全にまたは部分的にカバー） 他のグリッド項目 以下の場合
- 別のグリッドアイテムのセルをまたがるように設定されています.
- サイズが大きくなり、近くのグリッド項目と重なる.
- 他のグリッド項目の上に移動しました.
2番目と3番目のケースについては後で説明します。 “サイジング” そして “動く” セクション.
最初に、グリッド項目があるときの最初のケースを見てみましょう。 別のものにまたがる.
中央のグリッド項目は 左にまたがる, 画面には2つの項目しか表示されません。.
.grid-center grid-area：center;グリッド列：1/3。
の グリッド列 そして グリッド行 プロパティ グリッド線を割り当てる 列または行が収まる必要があるもの.
下の図では、 グリッド列：1/3 CSSルールが機能する：中央の列 グリッド線1と3の間のスパン. その結果、中央の列は左の列と重なります。.
グリッド項目を移動する
移動することで、つまり アイテムを少し動かす. あなたがアイテムを他のグリッドセル/エリアに完全に再配置したいならば、私はあなたがグリッド作成コードを更新することを勧めます.
グリッド項目を移動するのは簡単です。ただ 使用 マージン, の 変形する, または 位置：相対; プロパティ. これらのプロパティを使用してアイテムがどのように移動されるかを以下で参照.
中央と右のグリッド項目は、次の方法で（上記のように）移動できます。
1.を使う マージン
負の余白はグリッド項目の寸法を大きくし、正の余白はそれらをトリミングします。両方を組み合わせて使用することで、グリッド項目を少し動かすことができます。.
.grid-center grid-area：center;左余白：-10px。右マージン：10px。マージントップ：-10px。マージンボトム：10px。 grid-area：right;。左余白：10px。右マージン：-10px。マージントップ：-10px。マージンボトム：10px。
使用する 変形する
の translate（） CSS機能 要素をx軸とy軸に沿って移動する. と一緒に使う 変形する プロパティを使用すると、グリッド項目の位置を変更できます.
.grid-center grid-area：center;変換：変換（ - 10px、 - 10px）。 grid-area：right;。変換：translate（10px、-10px）;
3.使用 ポジション
を使う 位置：相対; 指定されたルール 上, 底, 左, そして 右 プロパティは、グリッド項目の周りを移動するためにも使用できます。.
.grid-center grid-area：center;位置：相対;下：10px。右：10ピクセル。 grid-area：right;。位置：相対;下：10px。左：10ピクセル。
グリッド項目の注文
グリッド項目は画面にレンダリングされます HTMLソースコードに現れる順番で.
前のセクションでは、中央のアイテムが左に移動されると、ブラウザによって左のアイテムの上に配置されました。これは、HTMLでは, しかし、私たちはできる 注文グリッド項目を変更する を使用して を使う CSSグリッドレイアウトモジュールのように、HTMLの要素の順序を変更する グリッドレイアウトには影響しません, あなたも置くことができます グリッド項目に自動サイズの行または列を使用する場合は、 サンプルグリッドでは、3つの列すべてが1つの分数を取ることを忘れないでください（ ここでは、左の商品のサイズを変更します を使用して ここでは、左の商品のサイズを変更します を使用して Zインデックス または 注文 CSSのプロパティ.
ｚインデックス：１。 ルール、左グリッド項目 より高いスタッキングコンテキストを得た.. grid-left グリッド領域：左; ｚインデックス：１。
サイズグリッド項目
自動, fr, gr サイズが大きくなると、隣接するアイテムのスペースが狭まります。 その場合に限り そのアイテム の大きさではない 変形する またはマイナスのマージン.frグリッドコンテナの）。左のアイテムが2つの異なる方法でサイズ変更された後、3つのアイテムすべてがどのように見えるかを見てください。.1.のサイズ
幅 そして 高さ幅 そして 高さ プロパティ. 結果として、それはグリッドコンテナの内側に留まります。.
.grid-left グリッド領域：左;幅：200ピクセル。高さ：90ピクセル。
2.のサイズ
変形する変形する 財産. その結果、コンテナをオーバーフローさせ、グリッドギャップも消えます。.
.grid-left グリッド領域：左;変換：ｓｃａｌｅｘ（１．８）。
