CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する

CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ 基本的な記述方法は動画でも紹介しています。初めて CSS グリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出すグリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるまではレイアウトを頭の中だけではなく、紙など

[Futaro99]

筆者がかわいい

[ku__ra__ge]

一周してtableレイアウトに戻ってきた感じがある

[HM_naoto]

「もっと早くに出会いたかった…」ってやつだ

[gt-r-blaze]

グリッドのセル結合

[eureka1]

mana

[minetty99]

“ display: grid; grid-gap: 10px;”

[sisicom]

グリッドレイアウトが現実的になって来たなあ。でもやっぱりガンはマイクロソフト...

[ylupin]

Web デザイン グリッド レイアウト

[adsty]

“display: grid”という配置方法を使ったレイアウト編集。

[otchy210]

これは…さすがに table 使った方が楽なのでは、と思ってしまう。モバイル時に display: block する感じだと、デスクトップファーストからは逃れられないけれど。

[kanariya_www]

[[css3]グリッド]

[DustOfHuman]

isotope使うと楽…という話でもなかった

[kmailleu]

すごく助かる…ありがたや

[wn_trinity]

古いブラウザを早く駆逐したい

[yasu-log]

IE/Edgeの対応には工夫が必要、ということをQiitaにまとめました。あわせてどうぞ！ http://qiita.com/clockmaker/items/2a6ba69ef6e452844adf

[toshitiru]

こうやってやるんだ〜

[ganaonaga]

わかりやすいです❗️試してみたいです❗️

[ytmtsu0423]

I

[leiqunni]

役に立ちそうな立ちそうな。

[anpaku]

勉強になります。

[qtamaki]

レスポンシブ職人の朝は早い

[kirari-aya]

やってるうちにわかんなくなるんだよなぁ。

[bml]

凄いけど面倒だ。

[tsuki-rs]

むちゃくちゃ勉強になった。わかりやすい！これ実践してみよう。

[kitamati]

設計図を見て分かる通りエクセル方眼紙は偉大だ(違)

[cv63kittyhawk]

ほむむ

[shields-pikes]

おお、これやってみたいな。複雑だけど。

[norando]

これは習得したい

[rjge]

“CSSグリッドレイアウトは最新版のChrome、Safari、Firefoxに対応しています。IEやEdgeについてはMicrosoftのデベロッパーガイドで -ms- ベンダープレフィックスを使った適応方法が紹介されています。”

[K-Ono]

YUIだのなんだのの時代からどう世間が動いたんやこれ。

[onehiro]

わかりやすい。