レイアウト v1.0.0

グリッド

CSS Gridを使用した明示的なカラムレイアウトのレイアウトコンポーネント。各子要素がグリッドセルを占め、カードレイアウト、ダッシュボード、構造化されたコンテンツに最適です。

プレビュー & コード

_grid.html.erb

███
  ████ █████████ █████████

  ██████
    ███ ██████ █████████████████ ██ ██
      █████████ ███████
      █████████ ███████
      █████████ ███████
    ██ ███ ██

Get Access to View Code

grid_component.rb

█ ██████████████████████ ████

█████ █████████████ █ ███████████████████
  ████ █ ███████████████████
  ████ █ ███████ ██ ██ ██████████

  ███ ████████████████ ██ ████ ████ ████████████████
    █████ █ ██████████████████ ███
    ████ █ ██████████
    ██████████████ █ █████████████████████ ██ ██

Get Access to View Code

grid_component.html.erb

████ ██████████ ████████████ ████
  ███ ███████ ██
██████

Get Access to View Code

オプション

名前	型	デフォルト	説明
`cols`	Integer	`3`	Number of columns (1-12)
`gap`	Symbol	`:md`	Gap between grid items: :none, :sm, :md, :lg
`class`	String	`""`	Additional CSS classes to apply

名前	型	デフォルト	説明
`cols`	Integer	`3`	Number of columns (1-12)
`gap`	Symbol	`:md`	Gap between grid items: :none, :sm, :md, :lg
`class`	String	`""`	Additional CSS classes to apply

変更履歴 v1.0.0

- Initial release with 1-12 column grid support
- Configurable gap sizes

フルアクセスを取得

このコンポーネントと他のすべてのソースコードをアンロックしましょう。一回のお支払いで永久アクセス。

今すぐアクセスを取得