grid-cols-1…12, none, subgrid and arbitrary templates like grid-cols-[200px_1fr]. This family contains 14 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
grid-cols-1grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5grid-template-columns: repeat(5, minmax(0, 1fr));
grid-cols-6grid-template-columns: repeat(6, minmax(0, 1fr));
grid-cols-7grid-template-columns: repeat(7, minmax(0, 1fr));
grid-cols-8grid-template-columns: repeat(8, minmax(0, 1fr));
grid-cols-9grid-template-columns: repeat(9, minmax(0, 1fr));
grid-cols-10grid-template-columns: repeat(10, minmax(0, 1fr));
grid-cols-11grid-template-columns: repeat(11, minmax(0, 1fr));
grid-cols-12grid-template-columns: repeat(12, minmax(0, 1fr));
grid-cols-nonegrid-template-columns: none;
grid-cols-subgridgrid-template-columns: subgrid;

Example#

example
html
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="glass p-6">Card</div> ×6
</div>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • The responsive card grid: 1 → 2 → 3 columns
  • Arbitrary templates unlock sidebar layouts: grid-cols-[16rem_1fr]

Common mistakes#

  • grid-cols-12 everywhere out of Bootstrap habit — semantic counts read better

utilities/flexbox/flex-direction|Flexbox · utilities/spacing/gap|Gap