Catalog Layouts

<.grid>

ConnieUI.Layouts

Cell 1
Cell 2
Cell 3
Cell 4
Cell 5
Cell 6
HEEx 
<div class="w-2xl">
  <ConnieUI.Layouts.grid cols={3}>
    <ConnieUI.Cards.slideout_card :for={n <- 1..6}>Cell {n}</ConnieUI.Cards.slideout_card>
  </ConnieUI.Layouts.grid>
</div>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

:integer
:integer
:string

Set by the example

class

Docs

CSS Grid layout with configurable rows and columns. ## Examples <ConnieUI.Layouts.grid cols={2} rows={2}> <div>Cell 1</div> <div>Cell 2</div> <div>Cell 3</div> <div>Cell 4</div> </ConnieUI.Layouts.grid> <ConnieUI.Layouts.grid cols={3} gap="lg"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </ConnieUI.Layouts.grid>
Attribute Type Default Description
cols :integer 1
1 | 2 | 3 | 4
rows :integer nil
nil | 1 | 2 | 3 | 4
gap :string "md"
none | xs | sm | md | lg | xl
class :any nil
Slot Slot attributes Description
inner_block *