Next
Grid classes
The layout grid classes and the column placement utilities.
| Class | Styles |
|---|---|
grid-default | display: grid;column-gap: var(--grid-default-gap);grid-template-columns: repeat(var(--grid-default-count), minmax(0, 1fr)); |
grid-cols-default | grid-template-columns: repeat(var(--grid-default-count), minmax(0, 1fr)); |
gap-grid-default | gap: var(--grid-default-gap); |
gap-x-grid-default | column-gap: var(--grid-default-gap); |
gap-y-grid-default | row-gap: var(--grid-default-gap); |
col-mx-0 | & { grid-column-start: 1; grid-column: span 12 / span 12; }@media (width >= 640px) { & { grid-column: span 24 / span 24; grid-column-start: 1; } } |
col-mx-1 | & { grid-column-start: 1; grid-column: span 12 / span 12; }@media (width >= 640px) { & { grid-column: span 22 / span 22; grid-column-start: 2; } } |
col-mx-2 | & { grid-column-start: 1; grid-column: span 12 / span 12; }@media (width >= 640px) { & { grid-column: span 20 / span 20; grid-column-start: 3; } } |
col-mx-3 | & { grid-column-start: 1; grid-column: span 12 / span 12; }@media (width >= 640px) { & { grid-column: span 18 / span 18; grid-column-start: 4; } } |
col-mx-4 | & { grid-column-start: 1; grid-column: span 12 / span 12; }@media (width >= 640px) { & { grid-column: span 16 / span 16; grid-column-start: 5; } } |
col-mx-5 | & { grid-column-start: 1; grid-column: span 12 / span 12; }@media (width >= 640px) { & { grid-column: span 14 / span 14; grid-column-start: 6; } } |
col-mx-6 | & { grid-column-start: 1; grid-column: span 12 / span 12; }@media (width >= 640px) { & { grid-column: span 12 / span 12; grid-column-start: 7; } } |