{% load ui_classes %}

<c-vars as="div"
        display="grid"
        columns="none"
        rows="none"
        flow="row"
        align_content="stretch"
        justify_items="stretch"
        gap="0"
        gap_x="0"
        gap_y="0"
        align="stretch"
        justify="start"
        padding="0"
        padding_x="0"
        padding_y="0"
        margin="0"
        margin_x="0"
        margin_y="0"
        surface="none"
        tone="solid"
        radius="none"
        elevation="none"
        width="auto"
        height="auto"
        class="" />
{% ui_class "ui.grid" "root" display=display columns=columns rows=rows flow=flow alignContent=align_content justifyItems=justify_items gap=gap gapX=gap_x gapY=gap_y align=align justify=justify padding=padding paddingX=padding_x paddingY=padding_y margin=margin marginX=margin_x marginY=margin_y surface=surface tone=tone radius=radius elevation=elevation width=width height=height class=class as root_class %}
<{{ as }} data-ui-grid
data-display="{{ display }}"
data-columns="{{ columns }}"
data-rows="{{ rows }}"
data-flow="{{ flow }}"
data-align-content="{{ align_content }}"
data-justify-items="{{ justify_items }}"
data-gap="{{ gap }}"
data-gap-x="{{ gap_x }}"
data-gap-y="{{ gap_y }}"
data-align="{{ align }}"
data-justify="{{ justify }}"
data-padding="{{ padding }}"
data-padding-x="{{ padding_x }}"
data-padding-y="{{ padding_y }}"
data-margin="{{ margin }}"
data-margin-x="{{ margin_x }}"
data-margin-y="{{ margin_y }}"
data-surface="{{ surface }}"
data-tone="{{ tone }}"
data-radius="{{ radius }}"
data-elevation="{{ elevation }}"
data-width="{{ width }}"
data-height="{{ height }}"
class="{{ root_class }}"
{{ attrs }}>
{{ slot }}
</{{ as }}>