Grid Layout System

Build complex, responsive layouts with NuvoUI's powerful CSS Grid utilities. Create grid systems that adapt to any screen size with minimal effort.

Basic Usage

Create grid containers with the .grid class. By default, grid items will flow into rows and automatically wrap:

Grid with Responsive Columns

Create responsive grids that change the number of columns at different breakpoints:

Grid Properties

Grid Template Columns

Define the number of columns in your grid with .cols-{n} classes:

Class	Properties	Description
.grid.cols-1	grid-template-columns: repeat(1, minmax(0, 1fr));	Creates a 1-column grid
.grid.cols-2	grid-template-columns: repeat(2, minmax(0, 1fr));	Creates a 2-column grid
.grid.cols-3	grid-template-columns: repeat(3, minmax(0, 1fr));	Creates a 3-column grid
...	...	Available up to .grid.cols-12
.grid.cols-3@md	@media (min-width: 768px) { grid-template-columns: repeat(3, minmax(0, 1fr)); }	Creates a 3-column grid on medium screens and up

Grid Template Rows

Define the number of rows in your grid with .rows-{n} classes:

Custom Grid Templates

For more complex layouts, you can use the cols-custom mixin in your SCSS:

Note:

Use underscores instead of spaces in the template string.

Auto-fit & Auto-fill

Create responsive layouts that automatically adjust the number of columns based on container width:

Auto-fit

Auto-fit expands items to fill the available space:

Auto-fill

Auto-fill creates as many tracks as possible, even if they're empty:

Class	Properties
.grid.auto-fit-sm	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
.grid.auto-fit-md	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
.grid.auto-fit-lg	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
.grid.auto-fill-sm	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
.grid.auto-fill-md	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
.grid.auto-fill-lg	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

Grid Gaps

Control the spacing between grid items using gap utilities:

Column and Row Gaps

Control column and row gaps independently:

Class	Properties	Description
.gap-1	gap: 0.25rem;	Adds a small gap between grid items
.gap-2	gap: 0.5rem;	Adds a medium gap between grid items
.gap-4	gap: 1rem;	Adds a large gap between grid items
.col-gap-2	column-gap: 0.5rem;	Adds gap only between columns
.row-gap-2	row-gap: 0.5rem;	Adds gap only between rows
.gap-4@md	@media (min-width: 768px) { gap: 1rem; }	Applies gap at medium breakpoint and up

Grid Flow

Control how items flow within the grid:

Row Flow (Default)

Column Flow

Dense Flow

Dense flow attempts to fill in holes in the grid:

Grid Item Spanning

Control how items span across columns and rows:

Column Spanning

Row Spanning

Responsive Spanning

Items can span differently at various breakpoints:

Class	Properties	Description
.col-span-2	grid-column: span 2 / span 2;	Item spans 2 columns
.row-span-3	grid-row: span 3 / span 3;	Item spans 3 rows
.col-span-2@md	@media (min-width: 768px) { grid-column: span 2 / span 2; }	Item spans 2 columns on medium screens and up

Grid Alignment

Control how items are aligned within the grid:

Justify Items (Horizontal Alignment)

Utility Options: justify-center, justify-start, justify-end, justify-stretch (default if not used any)

Mixin: justify(center)

Align Items (Vertical Alignment)

Utility Options: align-center, align-start, align-end, align-stretch (default if not used any)

Mixin: align(center)

Place Items (Both Alignments)

Utility Options: place-center, place-start, place-end, place-stretch (default if not used any)

Mixin: place(center)

Class	Properties
.justify-start	justify-items: start;
.justify-end	justify-items: end;
.center	justify-items: center;
.justify-stretch	justify-items: stretch;
.align-start	align-items: start;
.place-center	place-items: center;
.place-center@md	@media (min-width: 768px) { justify-items: center; }

Complex Layouts

Combine all the grid features to create complex, responsive layouts:

Dashboard Layout

Create complex layouts using SCSS:

SASS Mixins

Use these mixins in your Sass files for even more control:

Mixin	Description	Example
grid	Creates a grid container	@include NuvoUI.grid;
cols($count)	Sets grid columns	@include NuvoUI.cols(3);
cols-custom($template)	Sets custom grid template	@include NuvoUI.cols-custom("1fr_2fr_1fr");
auto-fit($min-width)	Creates auto-fit grid	@include NuvoUI.auto-fit(300px);
col-span($span)	Makes item span columns	@include NuvoUI.col-span(2);
gap($value)	Sets grid gap	@include NuvoUI.gap(1rem);
justify($value)	Sets horizontal alignment	@include NuvoUI.justify(center);

Example using mixins:

Best Practices

Do

• Use grid for two-dimensional layouts
• Combine with flex for nested components
• Use auto-fit/fill for responsive item sizing
• Take advantage of responsive variants

Avoid

• Overcomplicating simple one-dimensional layouts (use flex instead)
• Nesting grids too deeply
• Using grid when semantic HTML would work better
• Mixing different layout systems unnecessarily