5分で完璧に分かる！CSS Gridの基本的な使い方を解説

CSS Gridは、今まで使用してきたレイアウトの実装とは大きく異なります。flexboxはアイテムを一つの軸に沿って並べるので、floatの延長としてあまり難しくはないと思います。しかし、CSS Gridは軸が一つではなく、縦と横の二つの軸でレイアウトします。 CSS Gridの基本的な使い方を分かりやすく解説します。 Learn CSS Grid in 5 Minutes by Per Harald Borgen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Gridを始めよう！ 最初のグリッドレイアウト CSS Gridの列と行 CSS Gridのアイテムの配置 CSS Gridを始めよう！ グリッドレイアウトはWebサイトの設計において基本であり、CSS Grid モジュールはグリッドを作成するための最も強力で

[sometk]

gridの記事いつも思うんだけど、サンプルについて、ビフォアーはともかくアフターが現実的でなくて、使いどころがわからないんだよね‥レスポンシブで2x3や3x2、畳の配置とか案件でやる機会ないし。

[perry-tips]

“SS Gridは軸が一つではなく、縦と横の二つの軸でレイアウトします。”

[takahiro_kihara]

（たぶん）5分で分からないオラは、そう狂人orz

[kithzmky]

css webデザイン html

[shinagaki]

gridのstartが0じゃなくて1から始まるの違和感ありまくるな

[tsuki-rs]

基本的なことは見てわかったけど、余白って設定できないのかなぁ。

[assaulter]

やらねば...

[psfactory]

5分で完璧に分かる！CSS Gridの基本的な使い方を解説 | コリス

[bnmountain]

使ってみたいけどcan I use見る限りもうちょっとだけ時間がたってからって感じかな

[Rishatang]

I E 1 1

[ytkg]

いつからあったの？これは強い

[kathew]

バッドノウハウだった往年のテーブルレイアウトの長所の部分を、モダンに強力に実装した機能という印象 / メディアクエリでdisplayをblockないしinheritに切り替えるだけで要素を縦に並べられるの嬉しい