CSS Grids
CSS Grid is powerful tool that allows for two dimensional layouts to be created on the web.
Astral CSS Framework includes a robust CSS grid system that empowers developers to create complex, responsive layouts with ease. Leveraging the power of CSS Grid, Astral allows you to design web pages that are both flexible and visually appealing.
Grid Template Column
| Class | Properties |
|---|---|
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; |
Use the grid-cols-{n} utilities to create grids with n equally sized columns.
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
Grid Column Start / End
Use this for controlling how elements are sized and placed across grid columns.
| Class | Properties |
|---|---|
col-auto | grid-column: auto; |
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-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; |
col-start-5 | grid-column-start: 5; |
col-start-6 | grid-column-start: 6; |
col-start-7 | grid-column-start: 7; |
col-start-8 | grid-column-start: 8; |
col-start-9 | grid-column-start: 9; |
col-start-10 | grid-column-start: 10; |
col-start-11 | grid-column-start: 11; |
col-start-12 | grid-column-start: 12; |
col-start-auto | grid-column-start: auto; |
col-end-1 | grid-column-end: 1; |
col-end-2 | grid-column-end: 2; |
col-end-3 | grid-column-end: 3; |
col-end-4 | grid-column-end: 4; |
col-end-5 | grid-column-end: 5; |
col-end-6 | grid-column-end: 6; |
col-end-7 | grid-column-end: 7; |
col-end-8 | grid-column-end: 8; |
col-end-9 | grid-column-end: 9; |
col-end-10 | grid-column-end: 10; |
col-end-11 | grid-column-end: 11; |
col-end-12 | grid-column-end: 12; |
col-end-auto | grid-column-end: auto; |
Spanning column
Use the col-span-{n} utilities to make an element span n columns.
Starting and ending line
Use the col-start-{n} and col-end-{n} utilities to make an element start or end at the nth grid line. These can also be combined with the col-span-{n} utilities to span a specific number of columns.
Note that CSS grid lines start at 1, not 0, so a full-width element in a 6-column grid would start at line 1 and end at line 7.
Grid Template Rows
Use for specifying the rows in a grid layout..
| Class | Properties |
|---|---|
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-7 | grid-template-rows: repeat(7, minmax(0, 1fr)); |
grid-rows-8 | grid-template-rows: repeat(8, minmax(0, 1fr)); |
grid-rows-9 | grid-template-rows: repeat(9, minmax(0, 1fr)); |
grid-rows-10 | grid-template-rows: repeat(10, minmax(0, 1fr)); |
grid-rows-11 | grid-template-rows: repeat(11, minmax(0, 1fr)); |
grid-rows-12 | grid-template-rows: repeat(12, minmax(0, 1fr)); |
grid-rows-none | grid-template-rows: none; |
Use the grid-rows-{n} utilities to create grids with n equally sized rows.
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
Spanning row
Use the row-span-{n} utilities to make an element span n rows.
Starting and ending line
Use the row-start-{n} and row-end-{n} utilities to make an element start or end at the nth grid line. These can also be combined with the row-span-{n} utilities to span a specific number of rows.
Note that CSS grid lines start at 1, not 0, so a full-height element in a 3-row grid would start at line 1 and end at line 4.
| Class | Properties |
|---|---|
gap-1 |
gap: .25rem |
gap-2 |
gap: .5rem |
gap-3 |
gap: .7rem |
gap-4 |
gap: 1rem |
gap-5 |
gap: 1.2rem |
gap-6 |
gap: 1.5rem |
Gap
Use gap-{size} to change the gutter size in grid layouts.
Row Gap
Use col-gap-{size} to change the gutter size between columns in grid layouts.
| Class | Properties |
|---|---|
row-gap-1 |
row-gap: .25rem |
row-gap-2 |
row-gap: .5rem |
row-gap-3 |
row-gap: .7rem |
row-gap-4 |
row-gap: 1rem |
row-gap-5 |
row-gap: 1.2rem |
row-gap-6 |
row-gap: 1.5rem |
Column Gap
Use col-gap-{size} to change the gutter size between columns in grid layouts.
| Class | Properties |
|---|---|
col-gap-1 |
column-gap: .25rem |
col-gap-2 |
column-gap: .5rem |
col-gap-3 |
column-gap: .7rem |
col-gap-4 |
column-gap: 1rem |
col-gap-5 |
column-gap: 1.2rem |
col-gap-6 |
column-gap: 1.5rem |
Others
These are the other utility classes in Astral CSS Grids
| Class | Properties |
|---|---|
grid-flow-row |
grid-auto-flow: row; |
grid-flow-col |
grid-auto-flow: column; |
grid-flow-row-dense |
grid-auto-flow: row dense; |
grid-flow-row-dense |
grid-auto-flow: row dense; |
grid-flow-col-dense |
grid-auto-flow: column dense; |