web-dev-qa-db-ja.com

CSSグリッドの列の順序を変更する

CSSグリッドで遊んでいます。

デスクトップサイズで見ると(min-width: 769px)私は3列の単一行を持っています-このようなもの：

---------------------------------------------
|   col 1     |         col 2       | col 3 |
|             |                     |       |
---------------------------------------------

Css-gridを使用して列を移動できるので、モバイルレイアウトで次のようなことができます。

---------------------------------------------
|     col 1             |      col 3        |
|                       |                   |
---------------------------------------------
|                     col 2                 |
---------------------------------------------

私はこのようなものでセルをスパンしていることを知っています：

.content{
  grid-column: 1 / span2;
}

しかし、列の順序を変更したいのですが、プリプロセッサなしで変更できますか？

これが私の現在のグリッドクラスです：

.my-grid {
   display:grid;
   grid-template-columns: 15% 1fr 25% ;
   grid-template-rows: 1fr; /* for as many rows as you need */
   grid-gap: 10px;
   border: 2px solid #222;
   box-sizing: border-box;
}
htmlcsscss-grid
13
jwknz

グリッドレイアウトは、グリッドアイテムを再配置するための複数の方法を提供します。以下に3つ挙げました。

これが元のレイアウトです：

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}
<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

jsFiddleデモ1

1. grid-template-areas

grid-template-areasプロパティを使用すると、ASCIIビジュアルアートを使用してレイアウトを配置できます。

グリッド領域名（各要素に定義されている）を、表示したい位置に配置します。

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
  grid-template-areas: "column-1 column-2 column-3";
}

grid-item:nth-child(1) { grid-area: column-1; }
grid-item:nth-child(2) { grid-area: column-2; }
grid-item:nth-child(3) { grid-area: column-3; }

@media ( max-width: 500px ) {  
  grid-container { 
        grid-template-columns: 1fr 1fr; 
        grid-template-areas: " column-1 column-3 " 
                             " column-2 column-2 ";
   }
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}
<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

jsFiddleデモ2

スペック参照：

7.3。名前付き領域：grid-template-areasプロパティ

このプロパティは named grid area を指定します。これらは特定のグリッドアイテムには関連付けられていませんが、grid-placementプロパティから参照できます。

grid-template-areasプロパティの構文もグリッドの構造の視覚化を提供し、グリッドコンテナーの全体的なレイアウトを理解しやすくします。

すべての文字列は同じ列数でなければなりません。そうでない場合、宣言は無効です。

名前付きグリッド領域が複数のグリッドセルにまたがっていても、それらのセルが単一の塗りつぶされた長方形を形成していない場合、宣言は無効です。

注：このモジュールの将来のバージョンでは、非長方形または切断された領域が許可される可能性があります。

2.行ベースの配置

グリッドアイテムのサイズと場所を設定するには、grid-row-start、grid-row-end、grid-column-start、grid-column-end、またはそれらの短縮形であるgrid-rowおよびgrid-columnを使用します。グリッド。

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
}

@media ( max-width: 500px ) {  
  grid-container         { grid-template-columns: 1fr 1fr;  }
  grid-item:nth-child(1) { grid-row: 1 / 2; grid-column: 1 / 2; }
  grid-item:nth-child(2) { grid-row: 2 / 3; grid-column: 1 / 3; }
  grid-item:nth-child(3) { grid-row: 1 / 2; grid-column: 2 / 3; }
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}
<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

jsFiddleデモ

スペック参照：

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

3. order

グリッドレイアウトのorderプロパティは、Flexレイアウトの場合と同じです。

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
}

@media ( max-width: 500px ) {  
  grid-container         { grid-template-columns: 1fr 1fr;  }
  grid-item:nth-child(1) { order: 1; }
  grid-item:nth-child(2) { order: 3; grid-column: 1 / 3; }
  grid-item:nth-child(3) { order: 2; }
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}
<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

jsFiddleデモ

スペック参照：

6.3。並べ替えられたグリッドアイテム：orderプロパティ

21
Michael_B