static.dynamia-tools.css.grid.css Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of tools.dynamia.web Show documentation
A set of common classes and interfaces for web application development
There is a newer version: 5.3.1
/* Grid Container */
.dt-grid {
    display: grid;
}

.dt-inline-grid {
    display: inline-grid;
}

/* Grid Template Columns */
.dt-grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.dt-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.dt-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.dt-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.dt-grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.dt-grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

.dt-grid-cols-7 {
    grid-template-columns: repeat(7, 1fr);
}

.dt-grid-cols-8 {
    grid-template-columns: repeat(8, 1fr);
}

.dt-grid-cols-9 {
    grid-template-columns: repeat(9, 1fr);
}

.dt-grid-cols-10 {
    grid-template-columns: repeat(10, 1fr);
}

.dt-grid-cols-11 {
    grid-template-columns: repeat(11, 1fr);
}

.dt-grid-cols-12 {
    grid-template-columns: repeat(12, 1fr);
}

/* Grid Template Rows */
.dt-grid-rows-1 {
    grid-template-rows: repeat(1, 1fr);
}

.dt-grid-rows-2 {
    grid-template-rows: repeat(2, 1fr);
}

.dt-grid-rows-3 {
    grid-template-rows: repeat(3, 1fr);
}

.dt-grid-rows-4 {
    grid-template-rows: repeat(4, 1fr);
}

.dt-grid-rows-5 {
    grid-template-rows: repeat(5, 1fr);
}

.dt-grid-rows-6 {
    grid-template-rows: repeat(6, 1fr);
}

/* Grid Gap */
.dt-gap-0 {
    gap: 0;
}

.dt-gap-1 {
    gap: 0.25rem;
}

.dt-gap-2 {
    gap: 0.5rem;
}

.dt-gap-3 {
    gap: 0.75rem;
}

.dt-gap-4 {
    gap: 1rem;
}

.dt-gap-5 {
    gap: 1.25rem;
}

.dt-gap-6 {
    gap: 1.5rem;
}

.dt-gap-8 {
    gap: 2rem;
}

.dt-gap-10 {
    gap: 2.5rem;
}

.dt-gap-12 {
    gap: 3rem;
}

.dt-gap-16 {
    gap: 4rem;
}

.dt-gap-20 {
    gap: 5rem;
}

/* Grid Column Start / End */
.dt-col-start-1 {
    grid-column-start: 1;
}

.dt-col-start-2 {
    grid-column-start: 2;
}

.dt-col-start-3 {
    grid-column-start: 3;
}

.dt-col-start-4 {
    grid-column-start: 4;
}

.dt-col-start-5 {
    grid-column-start: 5;
}

.dt-col-start-6 {
    grid-column-start: 6;
}

.dt-col-start-7 {
    grid-column-start: 7;
}

.dt-col-start-8 {
    grid-column-start: 8;
}

.dt-col-start-9 {
    grid-column-start: 9;
}

.dt-col-start-10 {
    grid-column-start: 10;
}

.dt-col-start-11 {
    grid-column-start: 11;
}

.dt-col-start-12 {
    grid-column-start: 12;
}

.dt-col-end-1 {
    grid-column-end: 1;
}

.dt-col-end-2 {
    grid-column-end: 2;
}

.dt-col-end-3 {
    grid-column-end: 3;
}

.dt-col-end-4 {
    grid-column-end: 4;
}

.dt-col-end-5 {
    grid-column-end: 5;
}

.dt-col-end-6 {
    grid-column-end: 6;
}

.dt-col-end-7 {
    grid-column-end: 7;
}

.dt-col-end-8 {
    grid-column-end: 8;
}

.dt-col-end-9 {
    grid-column-end: 9;
}

.dt-col-end-10 {
    grid-column-end: 10;
}

.dt-col-end-11 {
    grid-column-end: 11;
}

.dt-col-end-12 {
    grid-column-end: 12;
}

/* Grid Row Start / End */
.dt-row-start-1 {
    grid-row-start: 1;
}

.dt-row-start-2 {
    grid-row-start: 2;
}

.dt-row-start-3 {
    grid-row-start: 3;
}

.dt-row-start-4 {
    grid-row-start: 4;
}

.dt-row-start-5 {
    grid-row-start: 5;
}

.dt-row-start-6 {
    grid-row-start: 6;
}

.dt-row-end-1 {
    grid-row-end: 1;
}

.dt-row-end-2 {
    grid-row-end: 2;
}

.dt-row-end-3 {
    grid-row-end: 3;
}

.dt-row-end-4 {
    grid-row-end: 4;
}

.dt-row-end-5 {
    grid-row-end: 5;
}

.dt-row-end-6 {
    grid-row-end: 6;
}

/* Grid Auto Flow */
.dt-grid-flow-row {
    grid-auto-flow: row;
}

.dt-grid-flow-col {
    grid-auto-flow: column;
}

.dt-grid-flow-dense {
    grid-auto-flow: dense;
}

.dt-grid-flow-row-dense {
    grid-auto-flow: row dense;
}

.dt-grid-flow-col-dense {
    grid-auto-flow: column dense;
}