Grid

Implemented Layout

Responsive CSS grid layout container with preset column configurations.

Kumo reference: kumo-ui.com/components/grid/

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Two columns

Item 1

First grid item

Item 2

Second grid item

Show template

{% load wdj %}
{% wdj_component "wdj/components/grid.html" variant="2up" %}
{% wdj_component "wdj/components/card.html"  %}
<p class="text-base font-medium">Item 1</p><p class="mt-1 text-base text-kumo-subtle">First grid item</p>
{% endwdj_component %}
{% wdj_component "wdj/components/card.html"  %}
<p class="text-base font-medium">Item 2</p><p class="mt-1 text-base text-kumo-subtle">Second grid item</p>
{% endwdj_component %}
{% endwdj_component %}

Three columns

Item 1

Item 2

Item 3

Item 4

Show template

{% load wdj %}
{% wdj_component "wdj/components/grid.html" variant="3up" %}
{% wdj_component "wdj/components/card.html"  %}
<p class="text-base">Item 1</p>
{% endwdj_component %}
{% wdj_component "wdj/components/card.html"  %}
<p class="text-base">Item 2</p>
{% endwdj_component %}
{% wdj_component "wdj/components/card.html"  %}
<p class="text-base">Item 3</p>
{% endwdj_component %}
{% wdj_component "wdj/components/card.html"  %}
<p class="text-base">Item 4</p>
{% endwdj_component %}
{% endwdj_component %}

Four columns

Item 1

Item 2

Item 3

Item 4

Show template

{% load wdj %}
{% wdj_component "wdj/components/grid.html" variant="4up" %}
{% wdj_component "wdj/components/card.html"  %}
<p class="text-base">Item 1</p>
{% endwdj_component %}
{% wdj_component "wdj/components/card.html"  %}
<p class="text-base">Item 2</p>
{% endwdj_component %}
{% wdj_component "wdj/components/card.html"  %}
<p class="text-base">Item 3</p>
{% endwdj_component %}
{% wdj_component "wdj/components/card.html"  %}
<p class="text-base">Item 4</p>
{% endwdj_component %}
{% endwdj_component %}

Asymmetric

Item 1

Item 2

Item 3

Item 4

Show template

{% load wdj %}
{% wdj_component "wdj/components/grid.html" variant="2-1" %}
{% wdj_component "wdj/components/card.html"  %}
<p class="text-base">Item 1</p>
{% endwdj_component %}
{% wdj_component "wdj/components/card.html"  %}
<p class="text-base">Item 2</p>
{% endwdj_component %}
{% wdj_component "wdj/components/card.html"  %}
<p class="text-base">Item 3</p>
{% endwdj_component %}
{% wdj_component "wdj/components/card.html"  %}
<p class="text-base">Item 4</p>
{% endwdj_component %}
{% endwdj_component %}

Responsive

Item 1

Item 2

Item 3

Item 4

Show template

{% load wdj %}
{% wdj_component "wdj/components/grid.html" variant="1-2-4up" %}
{% wdj_component "wdj/components/card.html"  %}
<p class="text-base">Item 1</p>
{% endwdj_component %}
{% wdj_component "wdj/components/card.html"  %}
<p class="text-base">Item 2</p>
{% endwdj_component %}
{% wdj_component "wdj/components/card.html"  %}
<p class="text-base">Item 3</p>
{% endwdj_component %}
{% wdj_component "wdj/components/card.html"  %}
<p class="text-base">Item 4</p>
{% endwdj_component %}
{% endwdj_component %}

Gap choices

First

Second

First

Second

First

Second

First

Second

Show template

{% load wdj %}
{% for gap in audit_grid_gaps %}{% wdj_component "wdj/components/grid.html" gap=gap variant="side-by-side" %}
<div class="rounded-lg bg-kumo-fill p-4">First</div><div class="rounded-lg bg-kumo-fill p-4">Second</div>
{% endwdj_component %}{% endfor %}

All responsive variants

First

Second

Third

Fourth

First

Second

Third

Fourth

First

Second

Third

Fourth

First

Second

Third

Fourth

First

Second

Third

Fourth

First

Second

Third

Fourth

First

Second

Third

Fourth

First

Second

Third

Fourth

First

Second

Third

Fourth

Show template

{% load wdj %}
{% for variant in audit_grid_variants %}{% wdj_component "wdj/components/grid.html" variant=variant %}
<div class="rounded-lg bg-kumo-fill p-3">First</div><div class="rounded-lg bg-kumo-fill p-3">Second</div><div class="rounded-lg bg-kumo-fill p-3">Third</div><div class="rounded-lg bg-kumo-fill p-3">Fourth</div>
{% endwdj_component %}{% endfor %}

Mobile dividers

First section

Second section

Show template

{% load wdj %}
{% wdj_component "wdj/components/grid.html" gap="none" %}
<div class="border-b border-kumo-hairline p-4 md:border-b-0 md:border-r">First section</div><div class="p-4">Second section</div>
{% endwdj_component %}

API Reference

Prop	Type	Default	Description
variant	string	component-specific	Variant; pass the documented value shown in the examples.
gap	string	unset	Gap; pass the documented value shown in the examples.
tag	string	unset	Tag; pass the documented value shown in the examples.
slot	string / HTML slot	unset	Rich HTML supplied by the wdj_component block tag, rendered in an isolated context.
attrs	dict	{}	Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract