alpha-grid/dist/agrid.css

Simple 12 column grid system build on css grid and inspired by Bootstrap

.agrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--agrid-gap, 0.25rem);
  padding-inline: var(--agrid-x-padding, 0px);
  margin-inline: var(--agrid-x-margin, 0px);
}

@media (min-width: 768px) {
  .agrid {
    --agrid-gap: var(--agrid-gap-md, 0.75rem);
  }
}
@media (min-width: 992px) {
  .agrid {
    --agrid-gap: var(--agrid-gap-lg, 1rem);
  }
}
@media (min-width: 1200px) {
  .agrid {
    --agrid-gap: var(--agrid-gap-xl, 1.5rem);
  }
}
.acol-1 {
  grid-column: auto/span 1;
}

.acol-2 {
  grid-column: auto/span 2;
}

.acol-3 {
  grid-column: auto/span 3;
}

.acol-4 {
  grid-column: auto/span 4;
}

.acol-5 {
  grid-column: auto/span 5;
}

.acol-6 {
  grid-column: auto/span 6;
}

.acol-7 {
  grid-column: auto/span 7;
}

.acol-8 {
  grid-column: auto/span 8;
}

.acol-9 {
  grid-column: auto/span 9;
}

.acol-10 {
  grid-column: auto/span 10;
}

.acol-11 {
  grid-column: auto/span 11;
}

.acol-12 {
  grid-column: auto/span 12;
}

:where(*[class*="sm:acol"]) {
  grid-column: auto/span 12;
}

@media (min-width: 576px) {
  .sm\:acol-1 {
    grid-column: auto/span 1;
  }

  .sm\:acol-2 {
    grid-column: auto/span 2;
  }

  .sm\:acol-3 {
    grid-column: auto/span 3;
  }

  .sm\:acol-4 {
    grid-column: auto/span 4;
  }

  .sm\:acol-5 {
    grid-column: auto/span 5;
  }

  .sm\:acol-6 {
    grid-column: auto/span 6;
  }

  .sm\:acol-7 {
    grid-column: auto/span 7;
  }

  .sm\:acol-8 {
    grid-column: auto/span 8;
  }

  .sm\:acol-9 {
    grid-column: auto/span 9;
  }

  .sm\:acol-10 {
    grid-column: auto/span 10;
  }

  .sm\:acol-11 {
    grid-column: auto/span 11;
  }

  .sm\:acol-12 {
    grid-column: auto/span 12;
  }
}
:where(*[class*="md:acol"]) {
  grid-column: auto/span 12;
}

@media (min-width: 768px) {
  .md\:acol-1 {
    grid-column: auto/span 1;
  }

  .md\:acol-2 {
    grid-column: auto/span 2;
  }

  .md\:acol-3 {
    grid-column: auto/span 3;
  }

  .md\:acol-4 {
    grid-column: auto/span 4;
  }

  .md\:acol-5 {
    grid-column: auto/span 5;
  }

  .md\:acol-6 {
    grid-column: auto/span 6;
  }

  .md\:acol-7 {
    grid-column: auto/span 7;
  }

  .md\:acol-8 {
    grid-column: auto/span 8;
  }

  .md\:acol-9 {
    grid-column: auto/span 9;
  }

  .md\:acol-10 {
    grid-column: auto/span 10;
  }

  .md\:acol-11 {
    grid-column: auto/span 11;
  }

  .md\:acol-12 {
    grid-column: auto/span 12;
  }
}
:where(*[class*="lg:acol"]) {
  grid-column: auto/span 12;
}

@media (min-width: 992px) {
  .lg\:acol-1 {
    grid-column: auto/span 1;
  }

  .lg\:acol-2 {
    grid-column: auto/span 2;
  }

  .lg\:acol-3 {
    grid-column: auto/span 3;
  }

  .lg\:acol-4 {
    grid-column: auto/span 4;
  }

  .lg\:acol-5 {
    grid-column: auto/span 5;
  }

  .lg\:acol-6 {
    grid-column: auto/span 6;
  }

  .lg\:acol-7 {
    grid-column: auto/span 7;
  }

  .lg\:acol-8 {
    grid-column: auto/span 8;
  }

  .lg\:acol-9 {
    grid-column: auto/span 9;
  }

  .lg\:acol-10 {
    grid-column: auto/span 10;
  }

  .lg\:acol-11 {
    grid-column: auto/span 11;
  }

  .lg\:acol-12 {
    grid-column: auto/span 12;
  }
}
:where(*[class*="xl:acol"]) {
  grid-column: auto/span 12;
}

@media (min-width: 1200px) {
  .xl\:acol-1 {
    grid-column: auto/span 1;
  }

  .xl\:acol-2 {
    grid-column: auto/span 2;
  }

  .xl\:acol-3 {
    grid-column: auto/span 3;
  }

  .xl\:acol-4 {
    grid-column: auto/span 4;
  }

  .xl\:acol-5 {
    grid-column: auto/span 5;
  }

  .xl\:acol-6 {
    grid-column: auto/span 6;
  }

  .xl\:acol-7 {
    grid-column: auto/span 7;
  }

  .xl\:acol-8 {
    grid-column: auto/span 8;
  }

  .xl\:acol-9 {
    grid-column: auto/span 9;
  }

  .xl\:acol-10 {
    grid-column: auto/span 10;
  }

  .xl\:acol-11 {
    grid-column: auto/span 11;
  }

  .xl\:acol-12 {
    grid-column: auto/span 12;
  }
}
.acol-offset-1 {
  grid-column-start: 2;
}

.acol-offset-2 {
  grid-column-start: 3;
}

.acol-offset-3 {
  grid-column-start: 4;
}

.acol-offset-4 {
  grid-column-start: 5;
}

.acol-offset-5 {
  grid-column-start: 6;
}

.acol-offset-6 {
  grid-column-start: 7;
}

.acol-offset-7 {
  grid-column-start: 8;
}

.acol-offset-8 {
  grid-column-start: 9;
}

.acol-offset-9 {
  grid-column-start: 10;
}

.acol-offset-10 {
  grid-column-start: 11;
}

.acol-offset-11 {
  grid-column-start: 12;
}

:where(*[class*="sm:acol-offset"]) {
  grid-column-start: auto;
}

@media (min-width: 576px) {
  .sm\:acol-offset-1 {
    grid-column-start: 2;
  }

  .sm\:acol-offset-2 {
    grid-column-start: 3;
  }

  .sm\:acol-offset-3 {
    grid-column-start: 4;
  }

  .sm\:acol-offset-4 {
    grid-column-start: 5;
  }

  .sm\:acol-offset-5 {
    grid-column-start: 6;
  }

  .sm\:acol-offset-6 {
    grid-column-start: 7;
  }

  .sm\:acol-offset-7 {
    grid-column-start: 8;
  }

  .sm\:acol-offset-8 {
    grid-column-start: 9;
  }

  .sm\:acol-offset-9 {
    grid-column-start: 10;
  }

  .sm\:acol-offset-10 {
    grid-column-start: 11;
  }

  .sm\:acol-offset-11 {
    grid-column-start: 12;
  }
}
:where(*[class*="md:acol-offset"]) {
  grid-column-start: auto;
}

@media (min-width: 768px) {
  .md\:acol-offset-1 {
    grid-column-start: 2;
  }

  .md\:acol-offset-2 {
    grid-column-start: 3;
  }

  .md\:acol-offset-3 {
    grid-column-start: 4;
  }

  .md\:acol-offset-4 {
    grid-column-start: 5;
  }

  .md\:acol-offset-5 {
    grid-column-start: 6;
  }

  .md\:acol-offset-6 {
    grid-column-start: 7;
  }

  .md\:acol-offset-7 {
    grid-column-start: 8;
  }

  .md\:acol-offset-8 {
    grid-column-start: 9;
  }

  .md\:acol-offset-9 {
    grid-column-start: 10;
  }

  .md\:acol-offset-10 {
    grid-column-start: 11;
  }

  .md\:acol-offset-11 {
    grid-column-start: 12;
  }
}
:where(*[class*="lg:acol-offset"]) {
  grid-column-start: auto;
}

@media (min-width: 992px) {
  .lg\:acol-offset-1 {
    grid-column-start: 2;
  }

  .lg\:acol-offset-2 {
    grid-column-start: 3;
  }

  .lg\:acol-offset-3 {
    grid-column-start: 4;
  }

  .lg\:acol-offset-4 {
    grid-column-start: 5;
  }

  .lg\:acol-offset-5 {
    grid-column-start: 6;
  }

  .lg\:acol-offset-6 {
    grid-column-start: 7;
  }

  .lg\:acol-offset-7 {
    grid-column-start: 8;
  }

  .lg\:acol-offset-8 {
    grid-column-start: 9;
  }

  .lg\:acol-offset-9 {
    grid-column-start: 10;
  }

  .lg\:acol-offset-10 {
    grid-column-start: 11;
  }

  .lg\:acol-offset-11 {
    grid-column-start: 12;
  }
}
:where(*[class*="xl:acol-offset"]) {
  grid-column-start: auto;
}

@media (min-width: 1200px) {
  .xl\:acol-offset-1 {
    grid-column-start: 2;
  }

  .xl\:acol-offset-2 {
    grid-column-start: 3;
  }

  .xl\:acol-offset-3 {
    grid-column-start: 4;
  }

  .xl\:acol-offset-4 {
    grid-column-start: 5;
  }

  .xl\:acol-offset-5 {
    grid-column-start: 6;
  }

  .xl\:acol-offset-6 {
    grid-column-start: 7;
  }

  .xl\:acol-offset-7 {
    grid-column-start: 8;
  }

  .xl\:acol-offset-8 {
    grid-column-start: 9;
  }

  .xl\:acol-offset-9 {
    grid-column-start: 10;
  }

  .xl\:acol-offset-10 {
    grid-column-start: 11;
  }

  .xl\:acol-offset-11 {
    grid-column-start: 12;
  }
}
.acol-order-first {
  order: -1;
}

.acol-order-last {
  order: 12;
}

.acol-order-1 {
  order: 1;
}

.acol-order-2 {
  order: 2;
}

.acol-order-3 {
  order: 3;
}

.acol-order-4 {
  order: 4;
}

.acol-order-5 {
  order: 5;
}

.acol-order-6 {
  order: 6;
}

.acol-order-7 {
  order: 7;
}

.acol-order-8 {
  order: 8;
}

.acol-order-9 {
  order: 9;
}

.acol-order-10 {
  order: 10;
}

.acol-order-11 {
  order: 11;
}

.sm\:acol-order-first {
  order: -1;
}

.sm\:acol-order-last {
  order: 12;
}

@media (min-width: 576px) {
  .sm\:acol-order-1 {
    order: 1;
  }

  .sm\:acol-order-2 {
    order: 2;
  }

  .sm\:acol-order-3 {
    order: 3;
  }

  .sm\:acol-order-4 {
    order: 4;
  }

  .sm\:acol-order-5 {
    order: 5;
  }

  .sm\:acol-order-6 {
    order: 6;
  }

  .sm\:acol-order-7 {
    order: 7;
  }

  .sm\:acol-order-8 {
    order: 8;
  }

  .sm\:acol-order-9 {
    order: 9;
  }

  .sm\:acol-order-10 {
    order: 10;
  }

  .sm\:acol-order-11 {
    order: 11;
  }
}
.md\:acol-order-first {
  order: -1;
}

.md\:acol-order-last {
  order: 12;
}

@media (min-width: 768px) {
  .md\:acol-order-1 {
    order: 1;
  }

  .md\:acol-order-2 {
    order: 2;
  }

  .md\:acol-order-3 {
    order: 3;
  }

  .md\:acol-order-4 {
    order: 4;
  }

  .md\:acol-order-5 {
    order: 5;
  }

  .md\:acol-order-6 {
    order: 6;
  }

  .md\:acol-order-7 {
    order: 7;
  }

  .md\:acol-order-8 {
    order: 8;
  }

  .md\:acol-order-9 {
    order: 9;
  }

  .md\:acol-order-10 {
    order: 10;
  }

  .md\:acol-order-11 {
    order: 11;
  }
}
.lg\:acol-order-first {
  order: -1;
}

.lg\:acol-order-last {
  order: 12;
}

@media (min-width: 992px) {
  .lg\:acol-order-1 {
    order: 1;
  }

  .lg\:acol-order-2 {
    order: 2;
  }

  .lg\:acol-order-3 {
    order: 3;
  }

  .lg\:acol-order-4 {
    order: 4;
  }

  .lg\:acol-order-5 {
    order: 5;
  }

  .lg\:acol-order-6 {
    order: 6;
  }

  .lg\:acol-order-7 {
    order: 7;
  }

  .lg\:acol-order-8 {
    order: 8;
  }

  .lg\:acol-order-9 {
    order: 9;
  }

  .lg\:acol-order-10 {
    order: 10;
  }

  .lg\:acol-order-11 {
    order: 11;
  }
}
.xl\:acol-order-first {
  order: -1;
}

.xl\:acol-order-last {
  order: 12;
}

@media (min-width: 1200px) {
  .xl\:acol-order-1 {
    order: 1;
  }

  .xl\:acol-order-2 {
    order: 2;
  }

  .xl\:acol-order-3 {
    order: 3;
  }

  .xl\:acol-order-4 {
    order: 4;
  }

  .xl\:acol-order-5 {
    order: 5;
  }

  .xl\:acol-order-6 {
    order: 6;
  }

  .xl\:acol-order-7 {
    order: 7;
  }

  .xl\:acol-order-8 {
    order: 8;
  }

  .xl\:acol-order-9 {
    order: 9;
  }

  .xl\:acol-order-10 {
    order: 10;
  }

  .xl\:acol-order-11 {
    order: 11;
  }
}