【CSS】gridジェネレーターを使って簡単にグリッドレイアウトを手に入れよう!

この記事は約2分で読めます。
広告

「display: grid」って今まで使ったことなかった。
便利だろうな~とは思ってたけど、なんか難しそうと思って「inline-block」を使い続けてた。
管理のしやすさとか、コード量削減とかを考えると、「flexbox」か「grid」を選ばなきゃと思っていたんだけど、難しそうって一回思っちゃうとだめだね。
めちゃくちゃ遅れてだけど、やっぱり覚えようと思い色々調べてたら便利なジェネレーターを見つけて、
覚えるのすっ飛ばしで「grid」が簡単に使える♪ってなったので紹介します!
「grid」と「flexbox」の違いは、縦だけ~や横だけのレイアウトなら「flexbox」の方が良くて、縦・横のmarginを意識した団落ちしたりできるレイアウトにするなら「grid」がイイ!って書いてあったので、それを信じて、じゃあ全部「grid」にしちゃおうと考えた。
全部「grid」ならheader、カラム、footerの大枠も実装できるっていうじゃない。
すごいね!
ちなみに「display:grid」をcan i use で調べたらIE以外フルサポートで、もうIEも終わったしIE対応しなくてもいいよね。

グリッドレイアウトのジェネレーター

グリッドレイアウトジェネレーターの画像
https://grid.layoutit.com/
このサイトは説明不要なくらい簡単に「grid」を扱えるんだ。
左のカラムで、pxだとか、%だとかを設定して、真ん中でサイズを調整して、右のカラムからコピーして自分のCSSに張り付ければ出来上がり。
今まで難しいと思ってきたことがガタガタと音を立てて崩れる感覚。
このジェネレーターで、僕もグリッドマスターになれました☆
以上!

エンデ・バタローをフォローする
CSS

埼玉県北本市に越してきて2年と少しになります。以前は東京都の京王線沿線に、その前は神戸の三宮、さらにその前は名古屋の八事霊園近くに住んでいました。

怖い話が大好きで、ネット怪談、ホラー小説、心霊Youtuber(オウマガドキch、ゾゾゾ)を寝る前のお供にしてます。

フロントエンドエンジニアとして9年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

エンデ・バタローをフォローする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました