ListFan
アーカイブ · 無料

CSS Grid生成

列数、行数、間隔からグリッドのプレビューとCSSを生成します。

このツールはアーカイブ済みです。使用前に計算方法と日付付きデータを再確認してください。

01値を入力

ブラウザーで動作

ブラウザー内でオフライン動作します。ページと必要なファイルの読み込み後は、処理にインターネット接続は不要です。

例
px

02CSS Grid生成

|

ブラウザーで動作

使い方

列数、行数、間隔からグリッドのプレビューとCSSを生成します。

ブラウザーで動作

データは端末内に

入力はこのページ内で処理され、サーバーには送信されません。

このツールについて

列数、行数、間隔からグリッドのプレビューとCSSを生成します。

等幅列のCSS Gridを作り、コードを自分のページへ調整できます。

ツールを使う ↑
使い方
  1. 値を入力
    • 列数
    • 行数
    • 間隔
  2. 計算方法

    列数、行数、間隔からグリッドのプレビューとCSSを生成します。

  3. 使用例 · 結果

    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;

計算方法

  1. 等幅列のCSS Gridを作り、コードを自分のページへ調整できます。
使用例

CSS Grid生成

列数
3
行数
2
間隔
16 px
結果
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 16px;

よくある質問

結果をどう解釈すればよいですか？

等幅列のCSS Gridを作り、コードを自分のページへ調整できます。

データはどこへ送られますか？

計算は端末上で行います。入力はサーバーへ送信されません。

用語と説明

値を入力

列数

個数は小数ではなく整数で入力してください。

最小値: 1 · 最大値: 12

行数

個数は小数ではなく整数で入力してください。

最小値: 1 · 最大値: 12

間隔

この量の数値を入力してください。 欄の横に表示された単位を使ってください。 px

最小値: 0 · 最大値: 100 px

結果

結果

等幅列のCSS Gridを作り、コードを自分のページへ調整できます。

入力値から以下の方法で計算します。

よくある間違いと修正

CSS Grid生成

間違い: 説明された適用範囲外で結果を使う。

修正: 等幅列のCSS Gridを作り、コードを自分のページへ調整できます。

制限と主な前提

  • 等幅列のCSS Gridを作り、コードを自分のページへ調整できます。
  • 表示値は丸められることがありますが、測定精度が向上するわけではありません。

その他のツール

すべてのツール