「display:grid; を使ってCSSのみでタイルレイアウトを実装する」のご紹介| Webデザイン参考記事まとめアプデ

2017年10月7日(土)

display:grid; を使ってCSSのみでタイルレイアウトを実装する

0

0

9

18

gridレイアウトとflexの違いをざっくり言うと、flexレイアウトは横方向のレイアウトを指定するのに対し、gridレイアウトは縦横に指定できることです。
以下はそのサンプルです。

See the Pen display:grid; を使ったタイルレイアウト by ponzu (@ponzu) on CodePen.

グリッドレイアウトで主に使うCSSプロパティ

上記のサンプルで使われているプロパティについて説明します。
grid-gap グリッドの余白 grid-template-columns グリッドの横幅 grid-template-rows グリッドの縦幅 grid-column ボックスの横配置 grid-row ボックスの縦配置

グリッドの番号は図...

Gimmick log

ponzuさんがご自身の備忘録として更新されているブログ。Web制作全般の技術的な内容が中心ですが、特にjQueryやjavascriptに関する記事は豊富で読み応え抜群。ソース等も詳細に書かれていますのでとても参考になります。

ponzuさんがご自身の備忘録として更新されているブログ。Web制作全般の技術的な内容が中心ですが、特にjQueryやjavascriptに関する記事は豊富で読み応え抜群。ソース等も詳細に書かれていますのでとても参考になります。Gimmick logの記事『display:grid; を使ってCSSのみでタイルレイアウトを実装する』についてまとめています。

HTML+CSSコーディングのカテゴリーに分類されます。気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のGimmick logで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとGimmick logの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。