CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system.
CSS-Tricks
Grid
The Grid component in Punica utilizes the capabilities of CSS Grid to deliver a responsive and versatile layout system. With support for up to 16 columns and offset functionality, it offers precise control over content placement and alignment. Perfect for modern and structured designs, the Grid component ensures consistency and adaptability across all screen sizes.
1
15
2
14
3
13
4
12
5
11
6
10
7
9
8
8
9
7
10
6
11
5
12
4
13
3
14
2
15
1
16
| Props | Value | ||
|---|---|---|---|
| Grid Size | 16 |
||
| Gap | 6px |
||
| Name | Default Class Name | ||
| Row | .row |
||
| Container | .container.container-{*} |
||
| Column | .col-{*}.col-{*}-{*} |
||
| Offset | .offset-{*}-{*} |
||
| Equal Height | .equal |
||
| Breakpoints | Default class | Viewport | Containers |
| Extra Small | .col-xs-{*} |
- | - |
| Small | .col-sm-{*} |
500px |
container-sm |
| Medium | .col-md-{*} |
768px |
container-md |
| Large | .col-lg-{*} |
992px |
container-lg |
| Extra Large | col-xl-{*} |
1260px |
container-xl |
| Extra Extra Large | col-xxl-{*} |
1400px |
container-xxl |
Standard Columns
Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure.
col-4
Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure. Mel ad quodsi nonumes
vulputate, sed cibo incorrupte ad, no nam atqui accusam.
col-4
Responsive Columns
Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure.
col-lg-4
Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure. Mel ad quodsi nonumes
vulputate, sed cibo incorrupte ad, no nam atqui accusam.
col-lg-4
Equal Height
Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure.
col-4
Lorem ipsum dolor sit amet, ex timeam dissentiet definitionem ius, no vix nihil iriure. Mel ad quodsi
nonumes
vulputate, sed cibo incorrupte ad, no nam atqui accusam.
col-4
Offset
Punica CSS Framework's Grid system supports up to 16 columns and includes an offset feature with responsive flexibility. Offset classes, such as
offset-sm-{*}, offset-md-{*}, offset-lg-{*}, offset-xl-{*}, and offset-xxl-{*}, allow you to create empty spaces within the grid at different breakpoints. This enables precise control over content alignment and spacing, ensuring adaptable and balanced layouts across various screen sizes.
col-lg-4 offset-lg-2
col-lg-4 offset-lg-12
col-md-4 offset-md-6
col-lg-4 offset-lg-2
col-sm-4 offset-sm-12
col-lg-2
offset-lg-2
offset-lg-2
col-lg-2
offset-lg-6
offset-lg-6
col-lg-2
offset-lg-10
offset-lg-10
col-lg-2
offset-lg-14
offset-lg-14
Containers
Punica CSS Framework's Grid system features flexible container classes—
container-sm, container-md, container-lg, container-xl, and container-xxl—that provide responsive layout control. These containers ensure consistent alignment and structure, adapting seamlessly to different screen sizes while forming the foundation for Punica's Grid-based designs.
container-sm
container-md
container-lg