伊藤 直子

伊藤 直子

1647732000

最高のCSSグリッドジェネレーターの比較

グリッド、グリッド、グリッド。それらを使ってできることはたくさんあります。しかし、覚えておかなければならない多くのプロパティ。😅

あなたが私のようで、グリッドを使用するときに常にGoogleに頼らなければならない場合、このガイドで説明するトリックは、開発者としてのあなたの生活をはるかに楽にします。

CSSグリッドジェネレーターとは何ですか？

グリッドジェネレーターは、数回クリックするだけでグリッドを生成するために使用できるWebサイトです。しかし、なぜあなたはそれらを気にする必要がありますか？私の場合、Webサイトのレイアウトや、インターフェイス内の複雑なレスポンシブ構造を設計するときに、これらを頻繁に使用します。グリッドは、わずか数行のCSSで多くのことを達成するのに役立ち、多くの時間を節約できるので素晴らしいです。

この記事では、次のCSSグリッドジェネレーターを比較し、それらの長所と短所を一覧表示して、お気に入りのものをブックマークできるようにします。

  • CSSグリッドジェネレーター
  • CSSレイアウトジェネレーター
  • グリッドLayoutIt
  • グリディ
  • Cssgr.id
  • AngryToolsCSSグリッド

また、時間を節約するために、覚えておく必要のある重要なCSSグリッドプロパティを使用してチートシートを作成しました。🥳このチートシートは、この記事の下部にあります。

1.CSSグリッドジェネレーター

CSSグリッドジェネレーターを最もよく使用するので、リストの最初に置きます。これはSarahDrasnerによって設計されたオープンソースプロジェクトです（プロジェクトのコードは、貢献したい場合はここから入手できます）。

例を挙げると、最近、2行3列の単純なグリッドを生成する必要がありました。行ギャップと列ギャップに特定のサイズを設定する方法を覚えていませんでした。CSS Grid Generatorを使用すると、必要な構造を簡単に作成して、より複雑なタスクに進むことができました。

.parent {表示：グリッド; grid-template-columns：repeat（3、1fr）; grid-template-rows：repeat（2、1fr）; grid-column-gap：60px; grid-row-gap：30px; }

最終的なグリッドは次のようになりました。

長所：

  • インターフェイスはユーザーフレンドリーで、色も適切に選択されているため、CSSグリッドジェネレーターはCSSグリッドに慣れたい初心者にとって優れたツールです。
  • CSSグリッドジェネレーターは、グリッド全体の列、行、およびギャップの数を指定できるため、ほとんどのユースケースで必要な結果を得るのに役立ちます。
  • ボタンを1つ押すだけで、コードをプレビューしてクリップボードにコピーできます

短所：

  • 時間を節約するために選択できるテンプレートはありません
  • 複雑なレイアウトを生成することはできません

2.CSSレイアウトジェネレーター

CSSレイアウトジェネレーターをリストの最初に置くこともできます。常に複雑なグリッドを生成する場合は、これをブックマークする必要があります。ブレードデザインシステムによって開発されたCSSレイアウトジェネレーターは、ほとんどの頭痛の種を解決する幅広いオプションを提供します。

私の日常業務では、CSSレイアウトジェネレーターテンプレートを頻繁に使用します。これは、サイドバー/コンテナーまたはヘッダー/メイン/フッターのある構造を便利に選択できるためです。

<section class="layout">
  <!-- The left sidebar where you can put your navigation items etc. -->
  <div class="sidebar">1</div>

  <!-- The main content of your website -->
  <div class="body">2</div>
</section>

<style>
.layout {
  width: 1366px;
  height: 768px;
  display: grid;
  /* This is the most important part where we define the size of our sidebar and body  */
  grid:
    "sidebar body" 1fr
    / auto 1fr;
  gap: 8px;
}

.sidebar {
  grid-area: sidebar;
}

.body {
  grid-area: body;
}
</style>

サイドバーオプションは次のようになります。

長所：

  • CSS Layout Generatorを使用すると、6つの標準テンプレートから選択してより早く開始できます
  • ほぼすべてのユースケースを解決するための多くのオプションがあります
  • グリッドとFlexboxを切り替えることができます。これは、両方のオプションを比較するのに役立ちます
  • インターフェースは素晴らしく、ユーザーフレンドリーです

短所：

  • それは非常に多くのオプションを提供するので、CSSレイアウトジェネレータは初心者にとって混乱する可能性があります

3.グリッドLayoutIt

グリッドレイアウトこれはLeniolabsによって開発されたもので、多くのオプションを備えたもう1つのグリッドジェネレーターです。貢献に興味がある場合は、コードをGitHubで公開しています。

先週、顧客から、製品に関する重要なメトリックを表示するためのインターフェイスを設計するように依頼されました（Geckoboardに多少似ています）。彼が望んでいたレイアウトは非常に正確でしたが、LayoutItのおかげで、数秒でコードを生成できました。

<div class="container">
  <div class="metric-1"></div>
  <div class="metric-2"></div>
  <div class="metrics-3"></div>
  <div class="metric-4"></div>
  <div class="metric-5"></div>
  <div class="metric-6"></div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 20px 20px;
  grid-auto-flow: row;
  grid-template-areas:
    "metric-1 metric-1 metric-2"
    "metrics-3 metric-4 metric-2"
    "metric-5 metric-5 metric-6";
}
.metric-1 {
  grid-area: metric-1;
}
.metric-2 {
  grid-area: metric-2;
}
.metrics-3 {
  grid-area: metrics-3;
}
.metric-4 {
  grid-area: metric-4;
}
.metric-5 {
  grid-area: metric-5;
}
.metric-6 {
  grid-area: metric-6;
}
</style>

結果のレイアウトは次のようになります。

長所：

  • グリッドレイアウト直感的に使用でき、多くのオプションを提供します
  • ピクセル（px）、フラクショナル（fr）、およびパーセンテージ（％）を使用して、列と行を設定できます。
  • レイアウトは、ワンクリックでCodePen、CodeSandbox、またはStackBlitzにエクスポートできます
  • インターフェースは適切に設計されており、オプションとグリッドプレビューの間に適切なコントラストがあります。
  • グリッドレイアウトグリッド配置オプションをサポート

短所：

  • このジェネレーターは、時間を節約するためのテンプレートを提供していません。これが、リストの3番目に配置した主な理由です。

4.グリディ

私の過去の経験では、Griddyを使用して多くの時間を費やしました。Sarah Drasnerによって作成されたCSSグリッドよりも使いやすさは少し劣りますが、より多くのオプションが提供されます。

たとえば、次の3行の4列グリッドを簡単に生成できます。

.container {
  display: grid;
  grid-template-columns: 1fr 300px 1fr 1fr;
  grid-template-rows: 2fr 100px 1fr;
  grid-column-gap: 10px
  grid-row-gap: 20px
  justify-items: stretch
  align-items: stretch
}

結果のレイアウトは次のようになります。

長所：

  • ピクセル（px）、フラクショナル（fr）、およびパーセンテージ（％）を使用して、列と行を設定できます。
  • 提供されているオプションは、ほとんどのユースケースを解決し、さまざまな配置をテストするのに十分です。一言で言えば、それは仕事を成し遂げます

短所：

  • 好みの問題かもしれませんが、オプション付きのサイドバーは私にとって最適なインターフェイスではありません。探しているものを取得するには、しばらくスクロールする必要があります
  • 選択できるテンプレートはありません
  • minmax()機能はありません

5. Cssgr.id

Cssgr.idは、オプションが多すぎないが、ほとんどのユースケースを解決するのに十分なグリッドジェネレーターを探している場合のもう1つの優れた選択肢です。

ギャラリーテンプレートがあることを思い出したので、昨年Cssgr.idを使用してギャラリーを作成しました。数回クリックするだけで、必要なものに非常に近いものを得ることができました。

<div class="grid">
  <!-- This item will take 3 columns and 2 rows -->
  <div class="span-col-3 span-row-2">Item 1</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 2</div>
  <div class="span-row-2">Item 3</div>
  <div class="span-row-3">Item 4</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 5</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 6</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 7</div>

  <!-- This item will take 3 columns and 2 rows -->
  <div class="span-col-3 span-row-2">Item 8</div>

  <!-- This item will take 2 columns and 3 rows -->
  <div class="span-col-2 span-row-2">Item 9</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 10</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 11</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 12</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 13</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 14</div>
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
}

/* Items with this class will take 3 columns */
.span-col-3 {
  grid-column: span 3 / auto;
}

/* Items with this class will take 2 columns */
.span-col-2 {
  grid-column: span 2 / auto;
}

/* Items with this class will take 2 rows */
.span-row-2 {
  grid-row: span 2 / auto;
}

/* Items with this class will take 3 rows */
.span-row-3 {
  grid-row: span 3 / auto;
}
</style>

ギャラリーは次のようになりました。

長所：

  • Cssgr.idには、5つの実用的なスターターレイアウト（3×3、サッカーフォーメーション、ヘッダー/フッター、ギャラリー、および一般的なWebサイト）から選択できます。
  • プレースホルダーテキストを追加して、書かれたコンテンツでどのようにレンダリングされるかを確認できます
  • 簡単に設定できる適切に設計されたインターフェイスを備えています

短所：

  • ほとんどのオプションを備えたグリッドジェネレータではありません

6. AngryToolsCSSグリッド

Angry Tools CSSグリッドは、リストの最後のCSSグリッドジェネレーターです。このガイドで強調表示されている他のツールよりもユーザーフレンドリーではないかもしれませんが、便利な場合があります。

Angry Tools CSSグリッドは、ギャラリーを生成するときにも役立ちます。正方形をクリックすると、サイズと方向（水平または垂直）を定義できます。

<div class="angry-grid">
  <div id="item-0">Item 0</div>
  <div id="item-1">Item 1</div>
  <div id="item-2">Item 2</div>
  <div id="item-3">Item 3</div>
  <div id="item-4">Item 4</div>
  <div id="item-5">Item 5</div>
  <div id="item-6">Item 6</div>
  <div id="item-7">Item 7</div>
  <div id="item-8">Item 8</div>
  <div id="item-9">Item 9</div>
</div>

<style>
.angry-grid {
  display: grid;
  /* Our grid will be displayed using 3 rows */
  grid-template-rows: 1fr 1fr 1fr;
  /* Our grid will be displayed using 4 columns */
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  /* You can define a gap between your columns and your rows if you need to */
  gap: 0px;
  height: 100%;
}

/* This grid item will start at row 1 and column 4 and end at row 2 and column 5 */
#item-0 {
  background-color: #8bf7ba;
  grid-row-start: 1;
  grid-column-start: 4;
  grid-row-end: 2;
  grid-column-end: 5;
}

/* This grid item will start at row 2 and column 3 and end at row 3 and column 5 */
#item-1 {
  background-color: #bf9aa7;
  grid-row-start: 2;
  grid-column-start: 3;
  grid-row-end: 3;
  grid-column-end: 5;
}

/* This grid item will start at row 2 and column 2 and end at row 3 and column 3 */
#item-2 {
  background-color: #c7656e;
  grid-row-start: 2;
  grid-column-start: 2;
  grid-row-end: 3;
  grid-column-end: 3;
}

/* This grid item will start at row 1 and column 1 and end at row 2 and column 3 */
#item-3 {
  background-color: #b659df;
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 2;
  grid-column-end: 3;
}

/* This grid item will start at row 3 and column 1 and end at row 4 and column 3 */
#item-4 {
  background-color: #be6b5e;
  grid-row-start: 3;
  grid-column-start: 1;
  grid-row-end: 4;
  grid-column-end: 3;
}

/* This grid item will start at row 3 and column 4 and end at row 4 and column 6 */
#item-5 {
  background-color: #5bb9d7;
  grid-row-start: 3;
  grid-column-start: 4;
  grid-row-end: 4;
  grid-column-end: 6;
}

/* This grid item will start at row 1 and column 5 and end at row 3 and column 6 */
#item-6 {
  background-color: #56adba;
  grid-row-start: 1;
  grid-column-start: 5;
  grid-row-end: 3;
  grid-column-end: 6;
}

/* This grid item will start at row 1 and column 3 and end at row 2 and column 4 */
#item-7 {
  background-color: #9cab58;
  grid-row-start: 1;
  grid-column-start: 3;
  grid-row-end: 2;
  grid-column-end: 4;
}

/* This grid item will start at row 3 and column 3 and end at row 4 and column 4 */
#item-8 {
  background-color: #8558ad;
  grid-row-start: 3;
  grid-column-start: 3;
  grid-row-end: 4;
  grid-column-end: 4;
}

/* This grid item will start at row 2 and column 1 and end at row 3 and column 2 */
#item-9 {
  background-color: #96b576;
  grid-row-start: 2;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 2;
}
</style>

結果のギャラリーは次のようになります。

長所：

  • Angry Tools CSS Gridには、選択可能ないくつかのテンプレートが付属しています

短所：

  • 全体的に最高のデザインではありません。正直なところ、それはかなり醜く、使いにくいことがあります
  • 初心者にはお勧めしません。上級開発者は、おそらく代わりにCSSLayoutGeneratorまたはGridLayoutItのいずれかを選択する必要があります
  • CSS出力を取得するにはスクロールする必要があります

ボーナス：CSSグリッドチートシート

CSSグリッドジェネレーターは、CSSプロパティに慣れていない場合に最適です。ただし、より高度な開発者になると、簡単なチートシートの方がおそらく便利な場合があります。

😇それがあなたを助けることができるなら、これが私が自分のために作ったものです：

gap行と列の間のギャップサイズを設定します。これは、次のプロパティの省略形ですrow-gap。column-gap
row-gapグリッド行間のギャップを指定します
column-gap列間のギャップを指定します
gridgrid-template-rowsの省略grid-template-columns形プロパティ：grid-template-areas、、、、、、grid-auto-rowsgrid-auto-columnsgrid-auto-flow
grid-areaグリッドレイアウトでのグリッドアイテムのサイズと位置を指定します。これは、次のプロパティの省略形のプロパティです：grid-row-start、、、grid-column-startgrid-row-endgrid-column-end
grid-auto-columnsグリッドコンテナの列のサイズを設定します
grid-auto-flow自動配置されたアイテムをグリッドに挿入する方法を制御します
grid-auto-rowsグリッドコンテナの行のサイズを設定します
grid-columnグリッドレイアウトでのグリッドアイテムのサイズと位置を指定します。これは、次のプロパティの省略形のプロパティです。grid-column-start、grid-column-end
grid-column-endアイテムがまたがる列の数、またはアイテムが終了する列行を定義します
grid-column-gapグリッドレイアウトの列間のギャップのサイズを定義します
grid-column-startアイテムが開始する列行を定義します
grid-gapグリッドレイアウトの行と列の間のギャップのサイズを定義し、次のプロパティの省略形のプロパティです。grid-row-gap、grid-column-gap
grid-rowグリッドレイアウトでのグリッドアイテムのサイズと位置を指定します。これは、次のプロパティの省略形のプロパティです。grid-row-start、grid-row-end
grid-row-endアイテムがまたがる行数、またはアイテムが終了する行行を定義します
grid-row-gapグリッドレイアウトの行間のギャップのサイズを定義します
grid-row-startアイテムが開始する行行を定義します
grid-template次のプロパティの省略形プロパティ：grid-template-rows、、grid-template-columnsgrid-template-areas
grid-template-areasグリッドレイアウト内の領域を指定します
grid-template-columnsグリッドレイアウトの列の数（および幅）を指定します
grid-template-rowsグリッドレイアウトの行の数（および高さ）を指定します

最高のCSSグリッドジェネレーターのこの簡単な比較が、お気に入りのジェネレーターをブックマークするのに役立つことを願っています。

また、CSSグリッドを扱うときに重要なアドバイスを提供できる場合は、時間をかけてください。これらのジェネレーターは、必要なレイアウトを段階的に取得し、複雑なソリューションに依存することを回避するのに役立つため、優れたオプションです。

読んでくれてありがとう！  

ソース：https ：//blog.logrocket.com/comparing-best-css-grid-generators/

#css 

What is GEEK

Buddha Community

最高のCSSグリッドジェネレーターの比較
伊藤 直子

伊藤 直子

1647732000

最高のCSSグリッドジェネレーターの比較

グリッド、グリッド、グリッド。それらを使ってできることはたくさんあります。しかし、覚えておかなければならない多くのプロパティ。😅

あなたが私のようで、グリッドを使用するときに常にGoogleに頼らなければならない場合、このガイドで説明するトリックは、開発者としてのあなたの生活をはるかに楽にします。

CSSグリッドジェネレーターとは何ですか？

グリッドジェネレーターは、数回クリックするだけでグリッドを生成するために使用できるWebサイトです。しかし、なぜあなたはそれらを気にする必要がありますか？私の場合、Webサイトのレイアウトや、インターフェイス内の複雑なレスポンシブ構造を設計するときに、これらを頻繁に使用します。グリッドは、わずか数行のCSSで多くのことを達成するのに役立ち、多くの時間を節約できるので素晴らしいです。

この記事では、次のCSSグリッドジェネレーターを比較し、それらの長所と短所を一覧表示して、お気に入りのものをブックマークできるようにします。

  • CSSグリッドジェネレーター
  • CSSレイアウトジェネレーター
  • グリッドLayoutIt
  • グリディ
  • Cssgr.id
  • AngryToolsCSSグリッド

また、時間を節約するために、覚えておく必要のある重要なCSSグリッドプロパティを使用してチートシートを作成しました。🥳このチートシートは、この記事の下部にあります。

1.CSSグリッドジェネレーター

CSSグリッドジェネレーターを最もよく使用するので、リストの最初に置きます。これはSarahDrasnerによって設計されたオープンソースプロジェクトです（プロジェクトのコードは、貢献したい場合はここから入手できます）。

例を挙げると、最近、2行3列の単純なグリッドを生成する必要がありました。行ギャップと列ギャップに特定のサイズを設定する方法を覚えていませんでした。CSS Grid Generatorを使用すると、必要な構造を簡単に作成して、より複雑なタスクに進むことができました。

.parent {表示：グリッド; grid-template-columns：repeat（3、1fr）; grid-template-rows：repeat（2、1fr）; grid-column-gap：60px; grid-row-gap：30px; }

最終的なグリッドは次のようになりました。

長所：

  • インターフェイスはユーザーフレンドリーで、色も適切に選択されているため、CSSグリッドジェネレーターはCSSグリッドに慣れたい初心者にとって優れたツールです。
  • CSSグリッドジェネレーターは、グリッド全体の列、行、およびギャップの数を指定できるため、ほとんどのユースケースで必要な結果を得るのに役立ちます。
  • ボタンを1つ押すだけで、コードをプレビューしてクリップボードにコピーできます

短所：

  • 時間を節約するために選択できるテンプレートはありません
  • 複雑なレイアウトを生成することはできません

2.CSSレイアウトジェネレーター

CSSレイアウトジェネレーターをリストの最初に置くこともできます。常に複雑なグリッドを生成する場合は、これをブックマークする必要があります。ブレードデザインシステムによって開発されたCSSレイアウトジェネレーターは、ほとんどの頭痛の種を解決する幅広いオプションを提供します。

私の日常業務では、CSSレイアウトジェネレーターテンプレートを頻繁に使用します。これは、サイドバー/コンテナーまたはヘッダー/メイン/フッターのある構造を便利に選択できるためです。

<section class="layout">
  <!-- The left sidebar where you can put your navigation items etc. -->
  <div class="sidebar">1</div>

  <!-- The main content of your website -->
  <div class="body">2</div>
</section>

<style>
.layout {
  width: 1366px;
  height: 768px;
  display: grid;
  /* This is the most important part where we define the size of our sidebar and body  */
  grid:
    "sidebar body" 1fr
    / auto 1fr;
  gap: 8px;
}

.sidebar {
  grid-area: sidebar;
}

.body {
  grid-area: body;
}
</style>

サイドバーオプションは次のようになります。

長所：

  • CSS Layout Generatorを使用すると、6つの標準テンプレートから選択してより早く開始できます
  • ほぼすべてのユースケースを解決するための多くのオプションがあります
  • グリッドとFlexboxを切り替えることができます。これは、両方のオプションを比較するのに役立ちます
  • インターフェースは素晴らしく、ユーザーフレンドリーです

短所：

  • それは非常に多くのオプションを提供するので、CSSレイアウトジェネレータは初心者にとって混乱する可能性があります

3.グリッドLayoutIt

グリッドレイアウトこれはLeniolabsによって開発されたもので、多くのオプションを備えたもう1つのグリッドジェネレーターです。貢献に興味がある場合は、コードをGitHubで公開しています。

先週、顧客から、製品に関する重要なメトリックを表示するためのインターフェイスを設計するように依頼されました（Geckoboardに多少似ています）。彼が望んでいたレイアウトは非常に正確でしたが、LayoutItのおかげで、数秒でコードを生成できました。

<div class="container">
  <div class="metric-1"></div>
  <div class="metric-2"></div>
  <div class="metrics-3"></div>
  <div class="metric-4"></div>
  <div class="metric-5"></div>
  <div class="metric-6"></div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 20px 20px;
  grid-auto-flow: row;
  grid-template-areas:
    "metric-1 metric-1 metric-2"
    "metrics-3 metric-4 metric-2"
    "metric-5 metric-5 metric-6";
}
.metric-1 {
  grid-area: metric-1;
}
.metric-2 {
  grid-area: metric-2;
}
.metrics-3 {
  grid-area: metrics-3;
}
.metric-4 {
  grid-area: metric-4;
}
.metric-5 {
  grid-area: metric-5;
}
.metric-6 {
  grid-area: metric-6;
}
</style>

結果のレイアウトは次のようになります。

長所：

  • グリッドレイアウト直感的に使用でき、多くのオプションを提供します
  • ピクセル（px）、フラクショナル（fr）、およびパーセンテージ（％）を使用して、列と行を設定できます。
  • レイアウトは、ワンクリックでCodePen、CodeSandbox、またはStackBlitzにエクスポートできます
  • インターフェースは適切に設計されており、オプションとグリッドプレビューの間に適切なコントラストがあります。
  • グリッドレイアウトグリッド配置オプションをサポート

短所：

  • このジェネレーターは、時間を節約するためのテンプレートを提供していません。これが、リストの3番目に配置した主な理由です。

4.グリディ

私の過去の経験では、Griddyを使用して多くの時間を費やしました。Sarah Drasnerによって作成されたCSSグリッドよりも使いやすさは少し劣りますが、より多くのオプションが提供されます。

たとえば、次の3行の4列グリッドを簡単に生成できます。

.container {
  display: grid;
  grid-template-columns: 1fr 300px 1fr 1fr;
  grid-template-rows: 2fr 100px 1fr;
  grid-column-gap: 10px
  grid-row-gap: 20px
  justify-items: stretch
  align-items: stretch
}

結果のレイアウトは次のようになります。

長所：

  • ピクセル（px）、フラクショナル（fr）、およびパーセンテージ（％）を使用して、列と行を設定できます。
  • 提供されているオプションは、ほとんどのユースケースを解決し、さまざまな配置をテストするのに十分です。一言で言えば、それは仕事を成し遂げます

短所：

  • 好みの問題かもしれませんが、オプション付きのサイドバーは私にとって最適なインターフェイスではありません。探しているものを取得するには、しばらくスクロールする必要があります
  • 選択できるテンプレートはありません
  • minmax()機能はありません

5. Cssgr.id

Cssgr.idは、オプションが多すぎないが、ほとんどのユースケースを解決するのに十分なグリッドジェネレーターを探している場合のもう1つの優れた選択肢です。

ギャラリーテンプレートがあることを思い出したので、昨年Cssgr.idを使用してギャラリーを作成しました。数回クリックするだけで、必要なものに非常に近いものを得ることができました。

<div class="grid">
  <!-- This item will take 3 columns and 2 rows -->
  <div class="span-col-3 span-row-2">Item 1</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 2</div>
  <div class="span-row-2">Item 3</div>
  <div class="span-row-3">Item 4</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 5</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 6</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 7</div>

  <!-- This item will take 3 columns and 2 rows -->
  <div class="span-col-3 span-row-2">Item 8</div>

  <!-- This item will take 2 columns and 3 rows -->
  <div class="span-col-2 span-row-2">Item 9</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 10</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 11</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 12</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 13</div>

  <!-- This item will take 1 column and 1 row -->
  <div>Item 14</div>
</div>

<style>
.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
}

/* Items with this class will take 3 columns */
.span-col-3 {
  grid-column: span 3 / auto;
}

/* Items with this class will take 2 columns */
.span-col-2 {
  grid-column: span 2 / auto;
}

/* Items with this class will take 2 rows */
.span-row-2 {
  grid-row: span 2 / auto;
}

/* Items with this class will take 3 rows */
.span-row-3 {
  grid-row: span 3 / auto;
}
</style>

ギャラリーは次のようになりました。

長所：

  • Cssgr.idには、5つの実用的なスターターレイアウト（3×3、サッカーフォーメーション、ヘッダー/フッター、ギャラリー、および一般的なWebサイト）から選択できます。
  • プレースホルダーテキストを追加して、書かれたコンテンツでどのようにレンダリングされるかを確認できます
  • 簡単に設定できる適切に設計されたインターフェイスを備えています

短所：

  • ほとんどのオプションを備えたグリッドジェネレータではありません

6. AngryToolsCSSグリッド

Angry Tools CSSグリッドは、リストの最後のCSSグリッドジェネレーターです。このガイドで強調表示されている他のツールよりもユーザーフレンドリーではないかもしれませんが、便利な場合があります。

Angry Tools CSSグリッドは、ギャラリーを生成するときにも役立ちます。正方形をクリックすると、サイズと方向（水平または垂直）を定義できます。

<div class="angry-grid">
  <div id="item-0">Item 0</div>
  <div id="item-1">Item 1</div>
  <div id="item-2">Item 2</div>
  <div id="item-3">Item 3</div>
  <div id="item-4">Item 4</div>
  <div id="item-5">Item 5</div>
  <div id="item-6">Item 6</div>
  <div id="item-7">Item 7</div>
  <div id="item-8">Item 8</div>
  <div id="item-9">Item 9</div>
</div>

<style>
.angry-grid {
  display: grid;
  /* Our grid will be displayed using 3 rows */
  grid-template-rows: 1fr 1fr 1fr;
  /* Our grid will be displayed using 4 columns */
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  /* You can define a gap between your columns and your rows if you need to */
  gap: 0px;
  height: 100%;
}

/* This grid item will start at row 1 and column 4 and end at row 2 and column 5 */
#item-0 {
  background-color: #8bf7ba;
  grid-row-start: 1;
  grid-column-start: 4;
  grid-row-end: 2;
  grid-column-end: 5;
}

/* This grid item will start at row 2 and column 3 and end at row 3 and column 5 */
#item-1 {
  background-color: #bf9aa7;
  grid-row-start: 2;
  grid-column-start: 3;
  grid-row-end: 3;
  grid-column-end: 5;
}

/* This grid item will start at row 2 and column 2 and end at row 3 and column 3 */
#item-2 {
  background-color: #c7656e;
  grid-row-start: 2;
  grid-column-start: 2;
  grid-row-end: 3;
  grid-column-end: 3;
}

/* This grid item will start at row 1 and column 1 and end at row 2 and column 3 */
#item-3 {
  background-color: #b659df;
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 2;
  grid-column-end: 3;
}

/* This grid item will start at row 3 and column 1 and end at row 4 and column 3 */
#item-4 {
  background-color: #be6b5e;
  grid-row-start: 3;
  grid-column-start: 1;
  grid-row-end: 4;
  grid-column-end: 3;
}

/* This grid item will start at row 3 and column 4 and end at row 4 and column 6 */
#item-5 {
  background-color: #5bb9d7;
  grid-row-start: 3;
  grid-column-start: 4;
  grid-row-end: 4;
  grid-column-end: 6;
}

/* This grid item will start at row 1 and column 5 and end at row 3 and column 6 */
#item-6 {
  background-color: #56adba;
  grid-row-start: 1;
  grid-column-start: 5;
  grid-row-end: 3;
  grid-column-end: 6;
}

/* This grid item will start at row 1 and column 3 and end at row 2 and column 4 */
#item-7 {
  background-color: #9cab58;
  grid-row-start: 1;
  grid-column-start: 3;
  grid-row-end: 2;
  grid-column-end: 4;
}

/* This grid item will start at row 3 and column 3 and end at row 4 and column 4 */
#item-8 {
  background-color: #8558ad;
  grid-row-start: 3;
  grid-column-start: 3;
  grid-row-end: 4;
  grid-column-end: 4;
}

/* This grid item will start at row 2 and column 1 and end at row 3 and column 2 */
#item-9 {
  background-color: #96b576;
  grid-row-start: 2;
  grid-column-start: 1;
  grid-row-end: 3;
  grid-column-end: 2;
}
</style>

結果のギャラリーは次のようになります。

長所：

  • Angry Tools CSS Gridには、選択可能ないくつかのテンプレートが付属しています

短所：

  • 全体的に最高のデザインではありません。正直なところ、それはかなり醜く、使いにくいことがあります
  • 初心者にはお勧めしません。上級開発者は、おそらく代わりにCSSLayoutGeneratorまたはGridLayoutItのいずれかを選択する必要があります
  • CSS出力を取得するにはスクロールする必要があります

ボーナス：CSSグリッドチートシート

CSSグリッドジェネレーターは、CSSプロパティに慣れていない場合に最適です。ただし、より高度な開発者になると、簡単なチートシートの方がおそらく便利な場合があります。

😇それがあなたを助けることができるなら、これが私が自分のために作ったものです：

gap行と列の間のギャップサイズを設定します。これは、次のプロパティの省略形ですrow-gap。column-gap
row-gapグリッド行間のギャップを指定します
column-gap列間のギャップを指定します
gridgrid-template-rowsの省略grid-template-columns形プロパティ：grid-template-areas、、、、、、grid-auto-rowsgrid-auto-columnsgrid-auto-flow
grid-areaグリッドレイアウトでのグリッドアイテムのサイズと位置を指定します。これは、次のプロパティの省略形のプロパティです：grid-row-start、、、grid-column-startgrid-row-endgrid-column-end
grid-auto-columnsグリッドコンテナの列のサイズを設定します
grid-auto-flow自動配置されたアイテムをグリッドに挿入する方法を制御します
grid-auto-rowsグリッドコンテナの行のサイズを設定します
grid-columnグリッドレイアウトでのグリッドアイテムのサイズと位置を指定します。これは、次のプロパティの省略形のプロパティです。grid-column-start、grid-column-end
grid-column-endアイテムがまたがる列の数、またはアイテムが終了する列行を定義します
grid-column-gapグリッドレイアウトの列間のギャップのサイズを定義します
grid-column-startアイテムが開始する列行を定義します
grid-gapグリッドレイアウトの行と列の間のギャップのサイズを定義し、次のプロパティの省略形のプロパティです。grid-row-gap、grid-column-gap
grid-rowグリッドレイアウトでのグリッドアイテムのサイズと位置を指定します。これは、次のプロパティの省略形のプロパティです。grid-row-start、grid-row-end
grid-row-endアイテムがまたがる行数、またはアイテムが終了する行行を定義します
grid-row-gapグリッドレイアウトの行間のギャップのサイズを定義します
grid-row-startアイテムが開始する行行を定義します
grid-template次のプロパティの省略形プロパティ：grid-template-rows、、grid-template-columnsgrid-template-areas
grid-template-areasグリッドレイアウト内の領域を指定します
grid-template-columnsグリッドレイアウトの列の数（および幅）を指定します
grid-template-rowsグリッドレイアウトの行の数（および高さ）を指定します

最高のCSSグリッドジェネレーターのこの簡単な比較が、お気に入りのジェネレーターをブックマークするのに役立つことを願っています。

また、CSSグリッドを扱うときに重要なアドバイスを提供できる場合は、時間をかけてください。これらのジェネレーターは、必要なレイアウトを段階的に取得し、複雑なソリューションに依存することを回避するのに役立つため、優れたオプションです。

読んでくれてありがとう！  

ソース：https ：//blog.logrocket.com/comparing-best-css-grid-generators/

#css