ancient-css/src/properties/grid-columns.css

ANCIENT-CSS A CSS utility library

.grid-columns-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 768px) {
  .sm\:grid-columns-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .sm\:grid-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sm\:grid-columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .sm\:grid-columns-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .sm\:grid-columns-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .sm\:grid-columns-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .sm\:grid-columns-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .sm\:grid-columns-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .sm\:grid-columns-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .md\:grid-columns-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .md\:grid-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .md\:grid-columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .md\:grid-columns-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .md\:grid-columns-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .md\:grid-columns-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .md\:grid-columns-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .md\:grid-columns-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .md\:grid-columns-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .lg\:grid-columns-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .lg\:grid-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-columns-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-columns-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-columns-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .lg\:grid-columns-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .lg\:grid-columns-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .lg\:grid-columns-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .lg\:grid-columns-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }

  .lg\:grid-columns-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}