トップページ > ブログ > グリッドレイアウトを簡単に!「CSS Grid Generator」

BLOG

ブログ

UPDATE:2024.2.2

CATEGORY

グリッドレイアウトを簡単に!「CSS Grid Generator」

グリッドレイアウトとは
要素を格子状に並べて自由に配置することができるCSSです。

例えばこのようなレイアウトがグリッドレイアウトです。

似たことが出来るフレックスレイアウトに比べると自由度が高い分
覚えるプロパティが多いので理解するまでに時間がかかるのがデメリットかと思います。


グリッドレイアウトを簡単に! 「CSS Grid Generator」


自由度が高い分、使い方を覚えるまでは作りたいレイアウトを作成するのに時間がかかるグリッドレイアウトですが
「CSS Grid Generator」を使えば直感的かつ簡単に作りたいレイアウトを作成することができます◎



「CSS Grid Generator」の使い方


冒頭のグリッドレイアウトを例にジェネレータを使ってみましょう

まずは「CSS Grid Generator」にアクセスします。

表示された画面右の「Columns」「Rows」に初期値で5が入っているので、
作りたいグリッドレイアウトに合わせて数値を変更します。


今回は横に「4」、縦に「2」のレイアウトなので「Columns:4」「Rows:2」と入力しましょう。

「Column Gap」「Row Gap」はグリッドの隙間の設定です。
今回は「20px」としてみました。

これで基本のレイアウトは反映されると思いますが、
今回作りたいレイアウトは一部のグリッドアイテムが連結していますね。

繋げたいグリッドアイテム同士はマウスでドラッグアンドドロップ、
それ以外のグリッドアイテムは普通にクリックすると図のような色がついて
作りたいレイアウトの形になると思います。

あとは「Please may I have some code」のボタンを押下すれば
HTMLとCSSが表示されるのでコピペで使えるようになります!

とても簡単ですね!


最後に

グリッドレイアウトは便利だけど、使い方が複雑でついフレックスボックスを使いがちだった私ですが、
このジェネレータならばグリッドレイアウトがとても簡単になるので
今後はどんどん活用してグリッドレイアウトを積極的に使って行こうと思います。

Happiness in Design

シアワセをデザインする会社

営業ゼロで年間600件以上
お問い合わせをいただいている
ノウハウを惜しみなく。

アプリコットデザインには創業当初から営業マンはいません。
創業当初からWEBを活用することに重点を置いて、これまで試行錯誤してきました。その結果、年間600件以上の問い合わせををこのホームページから得ています。ホームページという集客ツールを提供している私たち自身が、自社のホームページで集客できないのでは、お客様に自信を持ってオススメすることはできません。自社の実験から「WEBを活用して集客するためのノウハウを蓄積」した上で、誰よりもホームページの素晴らしさを知り、自信をもってお客様にご提供していきたいと考えます。

VIEW MORE

CONTACT

お問い合わせ・ご相談は
お気軽にどうぞ。

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

プロジェクト

それぞれの
らしさ溢れる日常を。

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ/ドッグサロン/
ネイルサロン/スクール

tone village

We're open.

採用情報

recruit info

豊かで彩りのある社会をつくる!

私たちは仕事を通して、一人でも多くの人が未来に対する希望を描けるような、そんなワクワクする社会をつくっていきたいと思っています。

VIEW MORE