.v2.grid {
    display: grid;
    --v2-grid-column-1-size: max-content;
    --v2-grid-column-2-size: max-content;
    --v2-grid-column-3-size: max-content;
    --v2-grid-column-4-size: max-content;
    --v2-grid-column-5-size: max-content;
}

.v2.grid.fill {
    --v2-grid-column-1-size: auto;
    --v2-grid-column-2-size: auto;
    --v2-grid-column-3-size: auto;
    --v2-grid-column-4-size: auto;
    --v2-grid-column-5-size: auto;
}

.v2.grid.al-start {
    align-items: flex-start;
}

.v2.grid.al-center {
    align-items: center;
}

.v2.grid.al-end {
    align-items: flex-end;
}

.v2.grid.ju-start {
    justify-items: flex-start;
}

.v2.grid.ju-center {
    justify-items: center;
}

.v2.grid.ju-end {
    justify-items: flex-end;
}

.v2.grid.gap {
    grid-gap: 8px;
}

.v2.grid.gap-small {
    grid-gap: 4px;
}

.v2.grid.gap-big {
    grid-gap: 12px;
}

.v2.grid.columns-2 {
    grid-template-columns: [col-1] var(--v2-grid-column-1-size) [col-2] var(--v2-grid-column-2-size);
}

.v2.grid.columns-3 {
    grid-template-columns: [col-1] var(--v2-grid-column-1-size) [col-2] var(--v2-grid-column-2-size) [col-3] var(--v2-grid-column-3-size);
}

.v2.grid.columns-4 {
    grid-template-columns: [col-1] var(--v2-grid-column-1-size) [col-2] var(--v2-grid-column-2-size) [col-3] var(--v2-grid-column-3-size) [col-4] var(--v2-grid-column-4-size);
}

.v2.grid.columns-5 {
    grid-template-columns: [col-1] var(--v2-grid-column-1-size) [col-2] var(--v2-grid-column-2-size) [col-3] var(--v2-grid-column-3-size) [col-4] var(--v2-grid-column-4-size) [col-5] var(--v2-grid-column-5-size);
}

.v2.grid > .col-1 {
    grid-column: col-1;
}

.v2.grid > .col-2 {
    grid-column: col-2;
}

.v2.grid > .col-3 {
    grid-column: col-3;
}

.v2.grid > .col-4 {
    grid-column: col-4;
}

.v2.grid > .col-5 {
    grid-column: col-5;
}

.v2.grid.col-1-fill {
    --v2-grid-column-1-size: auto !important;
}

.v2.grid.col-2-fill {
    --v2-grid-column-2-size: auto !important;
}

.v2.grid.col-3-fill {
    --v2-grid-column-3-size: auto !important;
}

.v2.grid.col-4-fill {
    --v2-grid-column-4-size: auto !important;
}

.v2.grid.col-5-fill {
    --v2-grid-column-5-size: auto !important;
}

.v2.grid.border {
    border: var(--v2-scaled-border-width) solid var(--v2-theme-border-light-color);
    border-radius: 2px;
    min-height: 30px;
}


.v2.grid.shadow {
    box-shadow: 1px 1px 2px #ccc;
}

    .v2.grid.shadow:hover {
        box-shadow: 2px 2px 3px #aaa;
    }

.v2.grid.alternate {
    background: var( --v2-theme-table-alternate-row-color )
}