1647732000
グリッド、グリッド、グリッド。それらを使ってできることはたくさんあります。しかし、覚えておかなければならない多くのプロパティ。😅
あなたが私のようで、グリッドを使用するときに常にGoogleに頼らなければならない場合、このガイドで説明するトリックは、開発者としてのあなたの生活をはるかに楽にします。
グリッドジェネレーターは、数回クリックするだけでグリッドを生成するために使用できるWebサイトです。しかし、なぜあなたはそれらを気にする必要がありますか?私の場合、Webサイトのレイアウトや、インターフェイス内の複雑なレスポンシブ構造を設計するときに、これらを頻繁に使用します。グリッドは、わずか数行のCSSで多くのことを達成するのに役立ち、多くの時間を節約できるので素晴らしいです。
この記事では、次のCSSグリッドジェネレーターを比較し、それらの長所と短所を一覧表示して、お気に入りのものをブックマークできるようにします。
また、時間を節約するために、覚えておく必要のある重要な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レイアウトジェネレーターテンプレートを頻繁に使用します。これは、サイドバー/コンテナーまたはヘッダー/メイン/フッターのある構造を便利に選択できるためです。
<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>
サイドバーオプションは次のようになります。
グリッドレイアウトこれは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>
結果のレイアウトは次のようになります。
私の過去の経験では、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
}
結果のレイアウトは次のようになります。
minmax()
機能はありません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>
ギャラリーは次のようになりました。
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>
結果のギャラリーは次のようになります。
CSSグリッドジェネレーターは、CSSプロパティに慣れていない場合に最適です。ただし、より高度な開発者になると、簡単なチートシートの方がおそらく便利な場合があります。
😇それがあなたを助けることができるなら、これが私が自分のために作ったものです:
gap | 行と列の間のギャップサイズを設定します。これは、次のプロパティの省略形ですrow-gap 。column-gap |
row-gap | グリッド行間のギャップを指定します |
column-gap | 列間のギャップを指定します |
grid | grid-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/
1647732000
グリッド、グリッド、グリッド。それらを使ってできることはたくさんあります。しかし、覚えておかなければならない多くのプロパティ。😅
あなたが私のようで、グリッドを使用するときに常にGoogleに頼らなければならない場合、このガイドで説明するトリックは、開発者としてのあなたの生活をはるかに楽にします。
グリッドジェネレーターは、数回クリックするだけでグリッドを生成するために使用できるWebサイトです。しかし、なぜあなたはそれらを気にする必要がありますか?私の場合、Webサイトのレイアウトや、インターフェイス内の複雑なレスポンシブ構造を設計するときに、これらを頻繁に使用します。グリッドは、わずか数行のCSSで多くのことを達成するのに役立ち、多くの時間を節約できるので素晴らしいです。
この記事では、次のCSSグリッドジェネレーターを比較し、それらの長所と短所を一覧表示して、お気に入りのものをブックマークできるようにします。
また、時間を節約するために、覚えておく必要のある重要な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レイアウトジェネレーターテンプレートを頻繁に使用します。これは、サイドバー/コンテナーまたはヘッダー/メイン/フッターのある構造を便利に選択できるためです。
<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>
サイドバーオプションは次のようになります。
グリッドレイアウトこれは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>
結果のレイアウトは次のようになります。
私の過去の経験では、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
}
結果のレイアウトは次のようになります。
minmax()
機能はありません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>
ギャラリーは次のようになりました。
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>
結果のギャラリーは次のようになります。
CSSグリッドジェネレーターは、CSSプロパティに慣れていない場合に最適です。ただし、より高度な開発者になると、簡単なチートシートの方がおそらく便利な場合があります。
😇それがあなたを助けることができるなら、これが私が自分のために作ったものです:
gap | 行と列の間のギャップサイズを設定します。これは、次のプロパティの省略形ですrow-gap 。column-gap |
row-gap | グリッド行間のギャップを指定します |
column-gap | 列間のギャップを指定します |
grid | grid-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/