grid で並べた要素の順番を変える方法　CSSでorderを設定

Web制作を勉強中のみなさん、こんにちは。

今回は、grid で並べた要素の順番を変える方法を紹介します。

gridで横並びにした要素があるとします。
その要素をスマホサイズで縦並びにするとき、要素の順番を変えたいときがあると思います。

flexならcolumn-reverseとかあるけど、gridの場合はどうするんだろ。
と私も実際につまづきました。

解決方法としては、CSSで「order」を設定してあげます。
参考になる方もいると思いますので、さくっと読んじゃってくださいね。

それではさっそくコードを見ていきましょう。

PCサイズでの横並び

まずはＰＣサイズです。

左が画像で、右がテキスト、というよく見かけるレイアウトです。

See the Pen
grid-beside by t.h (@tomtom15)
on CodePen.

grid-template-columns: 1fr 1fr;
このコードで、横幅の割合を１対１とした２カラムのレイアウトです。

スマホサイズで縦並びにする

先ほどの grid-template-columns: 1fr 1fr; を、

grid-template-columns: 1fr ;　にして縦並びにします。

そうすると、当然　画像→テキストの順番で縦になります。

See the Pen
grid-vertical by t.h (@tomtom15)
on CodePen.

画像とテキストの順番を入れ替える

今回実装したいのは順番を逆にすることです。

CSSに注目してください。
子要素の div:テキスト に「order:1;」、div:画像に「order:2;」を設定しました。

この番号順に要素を並べることができました。

See the Pen
grid-order by t.h (@tomtom15)
on CodePen.

要素が３つ以上あるときも同様です。

要素の数だけ、番号を振ってあげましょう。

その順番どおりに要素が表示されます。

まとめ

いかがでしたでしょうか。

レスポンシブデザインで要素の順番を変えることはよくあることですので、是非使ってみてください。

order:数字; 

もう覚えましたね。

初学者の方はflexに慣れている人もいるかもしれませんが、
gridも覚えておくと便利ですので徐々に慣れていきましょう。

それでまた！

grid関連の記事も紹介しておきます。

独学に悩んでいる方はこちらもどうぞ。
はじめての副業コース