CSS Grid Generator - ドラッグ＆ドロップ CSSグリッド生成ツール

 (cssgridgenerator.io)
18 ポイント 投稿者 GN⁺ 2024-07-14 | 1件のコメント | WhatsAppで共有
  • カスタムCSSグリッドレイアウトを、より簡単に作成できるよう支援するツール
    • 列、行、ギャップのサイズをマウス操作で手軽に指定可能
  • 使い方
    • 列、行、ギャップを必要に応じて指定
    • + 記号のある四角形をクリックして、グリッドに新しい要素を追加
    • 右下隅にあるハンドルを使って DIV のサイズを調整
    • 好きな位置へドラッグ＆ドロップして DIV を再配置
    • 最後に生成されたHTMLおよびCSSコードをコピーして、プロジェクトに貼り付け
  • Tailwind Grid Generatorを作成して好意的なフィードバックを得て、それをもとにplain CSS向けツールを開発

関連記事

1件のコメント

 
GN⁺ 2024-07-14
Hacker Newsのコメント
  • いくつかボックスを追加したあと、重なるように移動するとグリッド境界の外に出てしまう問題が発生する
  • Tailwind Grid Generatorを作って好意的なフィードバックを得たので、それをもとに plain CSS 向けのツールを開発した
  • グリッド設定よりも動的な再配置のほうが難しい問題だ
    • MDNを参考にして、グリッドが列を減らしたり増やしたりする方法を調べた
    • シンプルなユーティリティは反復的な作業を簡略化するのに役立つ
    • グリッド設定の状態をURLに保存できると便利そうだ
  • このジェネレーターは学習ツールとして有用で、構文や機能を理解すればより柔軟に使える
    • Chrome DevToolsもグリッドを編集して変更を即座に確認するのに便利だ
    • グリッドに関する投稿を書いた
  • 年配のプログラマーとして、テーブルを使ったグリッド作成には慣れているが、CSSレイアウトは難しい
    • こうしたツールはとても助かる
  • 数年前に似たようなサイトジェネレーターを見つけたが、ドラッグ＆ドロップ機能はなかった
    • grid-template-columns、gap など、CSSグリッドの基本概念を学んだ
    • これからも良い仕事を続けてほしい
  • グリッドが最初に登場したとき、テンプレート領域をベースにWebレイアウトを根本的に変えるだろうと思っていた
    • 内部フレームワークは作れず、代わりに flex を使った
    • Tailwindが登場して、素早くレスポンシブなフロントエンドを書くのに必要なものをすべて満たしてくれた
    • テンプレート領域を使う良いフレームワークや例を知っているか気になる
    • 次にグリッドを扱うときはこのツールを使うつもりだ
  • 2つのバグを見つけた
    • ブラウザーウィンドウのサイズを変更しても幅が追従しない
    • ボックスがコンテナより低いため、新しい行がグリッド内でさらに高い位置に配置される
  • Web開発者ではないが、12列以上が必要な場合もありそうだ
    • より大きい数値を入力すると列の解析がおかしくなる
  • UXがとても良い
    • ページレイアウトを頻繁に作るわけではないのでグリッド構文を深く学んではいないが、このツールはブックマークしておくつもりだ