LoopOS UI v1.1.26.2

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<div class="lui-grid_layout" style="--grid-cols: 3;
--grid-gap: 4px;
">
  <div class="lui-grid_layout__section">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      1
    </div>
  </div>
  <div class="lui-grid_layout__section">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      2
    </div>
  </div>
  <div class="lui-grid_layout__section">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      3
    </div>
  </div>
  <div class="lui-grid_layout__section">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      4
    </div>
  </div>
  <div class="lui-grid_layout__section">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      5
    </div>
  </div>
  <div class="lui-grid_layout__section">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      6
    </div>
  </div>
  <div class="lui-grid_layout__section">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      7
    </div>
  </div>
  <div class="lui-grid_layout__section">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      8
    </div>
  </div>
  <div class="lui-grid_layout__section">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      9
    </div>
  </div>
  <div class="lui-grid_layout__section">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      10
    </div>
  </div>
  <div class="lui-grid_layout__section">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      11
    </div>
  </div>
  <div class="lui-grid_layout__section">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      12
    </div>
  </div>
</div>

GridLayout

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
6
7
<%= render LooposUi::GridLayout.new(cols: params.key?(:cols) ? params[:cols] : 3, gap: params.key?(:gap) ? params[:gap] : 4) do |layout| %>
  <% 12.times do |i| %>
    <% layout.with_section do %>
      <%= render LooposUi::DummySlot.new(text: i + 1) %>
    <% end %>   
  <% end %>
<% end %>

No notes provided.

Param Description Input

—

—

Description

The GridLayout component is a responsive layout system that creates a CSS Grid-based layout with configurable columns and gaps. It provides a simple way to arrange content in a grid format where each section takes equal space within the defined number of columns. The component uses CSS Grid properties to create flexible, evenly-distributed layouts.

Arguments

Property Default Required Description
cols 2 No Number of columns in the grid (1-12 recommended)
gap 0 No Gap between grid items in pixels

Slots

Renders Many

sections - Individual grid items that will be arranged in the grid layout Slot attributes: - No specific attributes - each section renders its content as-is

Usage

Basic usage with default 2-column layout:

<%= render LooposUi::GridLayout.new do |layout| %>
  <% layout.with_section do %>
    First item
  <% end %>
  <% layout.with_section do %>
    Second item
  <% end %>
<% end %>

Custom column count and gap:

<%= render LooposUi::GridLayout.new(cols: 3, gap: 16) do |layout| %>
  <% 6.times do |i| %>
    <% layout.with_section do %>
      Item <%= i + 1 %>
    <% end %>
  <% end %>
<% end %>

Four-column layout with spacing:

<%= render LooposUi::GridLayout.new(cols: 4, gap: 8) do |layout| %>
  <% layout.with_section do %>
    Card 1
  <% end %>
  <% layout.with_section do %>
    Card 2
  <% end %>
  <% layout.with_section do %>
    Card 3
  <% end %>
  <% layout.with_section do %>
    Card 4
  <% end %>
<% end %>

Technical Details

The component uses CSS Grid with the following properties:

  • grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)) - Creates equal-width columns
  • gap: var(--grid-gap) - Sets the gap between grid items
  • CSS custom properties are used to make the grid responsive to the component's arguments
  • FlexLayout - Alternative layout system using flexbox with 12-column approach