Files
metabuilder/scss/global/_grid.scss
2026-03-09 22:30:41 +00:00

56 lines
2.4 KiB
SCSS

// Grid utility classes
.grid { display: grid }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)) }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)) }
.grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)) }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)) }
.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)) }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)) }
.grid-cols-none { grid-template-columns: none }
.grid-cols-subgrid { grid-template-columns: subgrid }
.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)) }
.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)) }
.grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)) }
.grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)) }
.grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)) }
.grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)) }
.grid-rows-none { grid-template-rows: none }
.col-span-1 { grid-column: span 1 / span 1 }
.col-span-2 { grid-column: span 2 / span 2 }
.col-span-3 { grid-column: span 3 / span 3 }
.col-span-4 { grid-column: span 4 / span 4 }
.col-span-5 { grid-column: span 5 / span 5 }
.col-span-6 { grid-column: span 6 / span 6 }
.col-span-7 { grid-column: span 7 / span 7 }
.col-span-8 { grid-column: span 8 / span 8 }
.col-span-9 { grid-column: span 9 / span 9 }
.col-span-10 { grid-column: span 10 / span 10 }
.col-span-11 { grid-column: span 11 / span 11 }
.col-span-12 { grid-column: span 12 / span 12 }
.col-span-full { grid-column: 1 / -1 }
.col-start-1 { grid-column-start: 1 }
.col-start-2 { grid-column-start: 2 }
.col-start-3 { grid-column-start: 3 }
.col-start-4 { grid-column-start: 4 }
.row-span-1 { grid-row: span 1 / span 1 }
.row-span-2 { grid-row: span 2 / span 2 }
.row-span-3 { grid-row: span 3 / span 3 }
.row-span-full { grid-row: 1 / -1 }
.grid-flow-row { grid-auto-flow: row }
.grid-flow-col { grid-auto-flow: column }
.grid-flow-dense { grid-auto-flow: dense }
.grid-flow-row-dense { grid-auto-flow: row dense }