mycsslab/src/utilities/grid.css

MyCSSLab Quantum v3.0 - Revolutionary CSS framework with AI-powered intelligence, holographic UI, neural networks, and quantum effects

/**
 * FluxCSS Grid Utilities
 * CSS Grid layout utilities
 */

/* Display */
.my-grid { display: grid; }
.my-inline-grid { display: inline-grid; }

/* Grid Template Columns */
.my-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.my-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.my-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.my-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.my-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.my-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.my-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.my-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.my-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.my-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.my-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.my-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.my-grid-cols-none { grid-template-columns: none; }

/* Grid Column Span */
.my-col-auto { grid-column: auto; }
.my-col-span-1 { grid-column: span 1 / span 1; }
.my-col-span-2 { grid-column: span 2 / span 2; }
.my-col-span-3 { grid-column: span 3 / span 3; }
.my-col-span-4 { grid-column: span 4 / span 4; }
.my-col-span-5 { grid-column: span 5 / span 5; }
.my-col-span-6 { grid-column: span 6 / span 6; }
.my-col-span-7 { grid-column: span 7 / span 7; }
.my-col-span-8 { grid-column: span 8 / span 8; }
.my-col-span-9 { grid-column: span 9 / span 9; }
.my-col-span-10 { grid-column: span 10 / span 10; }
.my-col-span-11 { grid-column: span 11 / span 11; }
.my-col-span-12 { grid-column: span 12 / span 12; }
.my-col-span-full { grid-column: 1 / -1; }

/* Grid Column Start */
.my-col-start-1 { grid-column-start: 1; }
.my-col-start-2 { grid-column-start: 2; }
.my-col-start-3 { grid-column-start: 3; }
.my-col-start-4 { grid-column-start: 4; }
.my-col-start-5 { grid-column-start: 5; }
.my-col-start-6 { grid-column-start: 6; }
.my-col-start-7 { grid-column-start: 7; }
.my-col-start-8 { grid-column-start: 8; }
.my-col-start-9 { grid-column-start: 9; }
.my-col-start-10 { grid-column-start: 10; }
.my-col-start-11 { grid-column-start: 11; }
.my-col-start-12 { grid-column-start: 12; }
.my-col-start-13 { grid-column-start: 13; }
.my-col-start-auto { grid-column-start: auto; }

/* Grid Column End */
.my-col-end-1 { grid-column-end: 1; }
.my-col-end-2 { grid-column-end: 2; }
.my-col-end-3 { grid-column-end: 3; }
.my-col-end-4 { grid-column-end: 4; }
.my-col-end-5 { grid-column-end: 5; }
.my-col-end-6 { grid-column-end: 6; }
.my-col-end-7 { grid-column-end: 7; }
.my-col-end-8 { grid-column-end: 8; }
.my-col-end-9 { grid-column-end: 9; }
.my-col-end-10 { grid-column-end: 10; }
.my-col-end-11 { grid-column-end: 11; }
.my-col-end-12 { grid-column-end: 12; }
.my-col-end-13 { grid-column-end: 13; }
.my-col-end-auto { grid-column-end: auto; }

/* Grid Template Rows */
.my-grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.my-grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.my-grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.my-grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.my-grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.my-grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }
.my-grid-rows-none { grid-template-rows: none; }

/* Grid Row Span */
.my-row-auto { grid-row: auto; }
.my-row-span-1 { grid-row: span 1 / span 1; }
.my-row-span-2 { grid-row: span 2 / span 2; }
.my-row-span-3 { grid-row: span 3 / span 3; }
.my-row-span-4 { grid-row: span 4 / span 4; }
.my-row-span-5 { grid-row: span 5 / span 5; }
.my-row-span-6 { grid-row: span 6 / span 6; }
.my-row-span-full { grid-row: 1 / -1; }

/* Grid Row Start */
.my-row-start-1 { grid-row-start: 1; }
.my-row-start-2 { grid-row-start: 2; }
.my-row-start-3 { grid-row-start: 3; }
.my-row-start-4 { grid-row-start: 4; }
.my-row-start-5 { grid-row-start: 5; }
.my-row-start-6 { grid-row-start: 6; }
.my-row-start-7 { grid-row-start: 7; }
.my-row-start-auto { grid-row-start: auto; }

/* Grid Row End */
.my-row-end-1 { grid-row-end: 1; }
.my-row-end-2 { grid-row-end: 2; }
.my-row-end-3 { grid-row-end: 3; }
.my-row-end-4 { grid-row-end: 4; }
.my-row-end-5 { grid-row-end: 5; }
.my-row-end-6 { grid-row-end: 6; }
.my-row-end-7 { grid-row-end: 7; }
.my-row-end-auto { grid-row-end: auto; }

/* Gap */
.my-gap-0 { gap: 0; }
.my-gap-1 { gap: 0.25rem; }
.my-gap-2 { gap: 0.5rem; }
.my-gap-3 { gap: 0.75rem; }
.my-gap-4 { gap: 1rem; }
.my-gap-5 { gap: 1.25rem; }
.my-gap-6 { gap: 1.5rem; }
.my-gap-8 { gap: 2rem; }
.my-gap-10 { gap: 2.5rem; }
.my-gap-12 { gap: 3rem; }
.my-gap-16 { gap: 4rem; }
.my-gap-20 { gap: 5rem; }
.my-gap-24 { gap: 6rem; }
.my-gap-32 { gap: 8rem; }
.my-gap-40 { gap: 10rem; }
.my-gap-48 { gap: 12rem; }
.my-gap-56 { gap: 14rem; }
.my-gap-64 { gap: 16rem; }
.my-gap-72 { gap: 18rem; }
.my-gap-80 { gap: 20rem; }
.my-gap-96 { gap: 24rem; }
.my-gap-px { gap: 1px; }

/* Gap X */
.my-gap-x-0 { column-gap: 0; }
.my-gap-x-1 { column-gap: 0.25rem; }
.my-gap-x-2 { column-gap: 0.5rem; }
.my-gap-x-3 { column-gap: 0.75rem; }
.my-gap-x-4 { column-gap: 1rem; }
.my-gap-x-5 { column-gap: 1.25rem; }
.my-gap-x-6 { column-gap: 1.5rem; }
.my-gap-x-8 { column-gap: 2rem; }
.my-gap-x-10 { column-gap: 2.5rem; }
.my-gap-x-12 { column-gap: 3rem; }
.my-gap-x-16 { column-gap: 4rem; }
.my-gap-x-20 { column-gap: 5rem; }
.my-gap-x-24 { column-gap: 6rem; }
.my-gap-x-32 { column-gap: 8rem; }
.my-gap-x-40 { column-gap: 10rem; }
.my-gap-x-48 { column-gap: 12rem; }
.my-gap-x-56 { column-gap: 14rem; }
.my-gap-x-64 { column-gap: 16rem; }
.my-gap-x-72 { column-gap: 18rem; }
.my-gap-x-80 { column-gap: 20rem; }
.my-gap-x-96 { column-gap: 24rem; }
.my-gap-x-px { column-gap: 1px; }

/* Gap Y */
.my-gap-y-0 { row-gap: 0; }
.my-gap-y-1 { row-gap: 0.25rem; }
.my-gap-y-2 { row-gap: 0.5rem; }
.my-gap-y-3 { row-gap: 0.75rem; }
.my-gap-y-4 { row-gap: 1rem; }
.my-gap-y-5 { row-gap: 1.25rem; }
.my-gap-y-6 { row-gap: 1.5rem; }
.my-gap-y-8 { row-gap: 2rem; }
.my-gap-y-10 { row-gap: 2.5rem; }
.my-gap-y-12 { row-gap: 3rem; }
.my-gap-y-16 { row-gap: 4rem; }
.my-gap-y-20 { row-gap: 5rem; }
.my-gap-y-24 { row-gap: 6rem; }
.my-gap-y-32 { row-gap: 8rem; }
.my-gap-y-40 { row-gap: 10rem; }
.my-gap-y-48 { row-gap: 12rem; }
.my-gap-y-56 { row-gap: 14rem; }
.my-gap-y-64 { row-gap: 16rem; }
.my-gap-y-72 { row-gap: 18rem; }
.my-gap-y-80 { row-gap: 20rem; }
.my-gap-y-96 { row-gap: 24rem; }
.my-gap-y-px { row-gap: 1px; }

/* Justify Items */
.my-justify-items-start { justify-items: start; }
.my-justify-items-end { justify-items: end; }
.my-justify-items-center { justify-items: center; }
.my-justify-items-stretch { justify-items: stretch; }

/* Justify Self */
.my-justify-self-auto { justify-self: auto; }
.my-justify-self-start { justify-self: start; }
.my-justify-self-end { justify-self: end; }
.my-justify-self-center { justify-self: center; }
.my-justify-self-stretch { justify-self: stretch; }

/* Align Items */
.my-items-start { align-items: start; }
.my-items-end { align-items: end; }
.my-items-center { align-items: center; }
.my-items-baseline { align-items: baseline; }
.my-items-stretch { align-items: stretch; }

/* Align Self */
.my-self-auto { align-self: auto; }
.my-self-start { align-self: start; }
.my-self-end { align-self: end; }
.my-self-center { align-self: center; }
.my-self-stretch { align-self: stretch; }
.my-self-baseline { align-self: baseline; }

/* Place Items */
.my-place-items-start { place-items: start; }
.my-place-items-end { place-items: end; }
.my-place-items-center { place-items: center; }
.my-place-items-stretch { place-items: stretch; }

/* Place Self */
.my-place-self-auto { place-self: auto; }
.my-place-self-start { place-self: start; }
.my-place-self-end { place-self: end; }
.my-place-self-center { place-self: center; }
.my-place-self-stretch { place-self: stretch; }

/* Place Content */
.my-place-content-start { place-content: start; }
.my-place-content-end { place-content: end; }
.my-place-content-center { place-content: center; }
.my-place-content-between { place-content: space-between; }
.my-place-content-around { place-content: space-around; }
.my-place-content-evenly { place-content: space-evenly; }
.my-place-content-stretch { place-content: stretch; }

/* Auto Columns */
.my-auto-cols-auto { grid-auto-columns: auto; }
.my-auto-cols-min { grid-auto-columns: min-content; }
.my-auto-cols-max { grid-auto-columns: max-content; }
.my-auto-cols-fr { grid-auto-columns: minmax(0, 1fr); }

/* Auto Rows */
.my-auto-rows-auto { grid-auto-rows: auto; }
.my-auto-rows-min { grid-auto-rows: min-content; }
.my-auto-rows-max { grid-auto-rows: max-content; }
.my-auto-rows-fr { grid-auto-rows: minmax(0, 1fr); }

/* Auto Flow */
.my-auto-flow-row { grid-auto-flow: row; }
.my-auto-flow-col { grid-auto-flow: column; }
.my-auto-flow-dense { grid-auto-flow: dense; }
.my-auto-flow-row-dense { grid-auto-flow: row dense; }
.my-auto-flow-col-dense { grid-auto-flow: column dense; }