Layout & Grid System

The Grid component is based on CSS Grid Layout feature, using TailwindCSS utility classes behind scenes.

The goal is to have a grid system that consist of only two components: Grid and Column (yes, no rows); Something that was really easy to use with minimal footprint but able to build complex layouts.

Grid

Defaults

1
2
3

Columns

1
2
3
4
5
6
7
8
9

Note: Please observe the cell order.

Rows

1
2
3
4
5
6
7
8
9

Gap

1
2
3
4
5
6
7
8
9

Col Gap

1
2
3
4
5
6
7
8
9

Row Gap

1
2
3
4
5
6
7
8
9

Spanning Columns

1
2
3
4
5

Starting and Ending Columns

1
2
3
4

Spanning Rows

1
2
3

Starting and Ending Rows

1
2
3
4

Responsive Grids

1
2
3
4
5
6
7
8
9
10

Responsive Columns

1
2
3
4
5
6
7
8
9
10

Note: Please resize the page to observe different responsive layouts.

Complex Layout

1
2.1
2.2
3
4.1
4.2

API

Grid props

NameTypeDefaultDescription
children
react node
Content, to be placed inside the grid.
className
string
Utility class names to be provided to Grid.
colGap
number
Space between adjacent columns.
cols
number
number of columns.
gap
number
Space between adjacent rows and columns.
lg
object
Responsive layout for lg breakpoint.
md
object
Responsive layout for md breakpoint.
rowGap
number
Space between adjacent rows.
rows
number
number of rows.
sm
object
Responsive layout for sm breakpoint.
xl
object
Responsive layout for xl breakpoint.
xs
object
Responsive layout for xs breakpoint.

Col Props

NameTypeDefaultDescription
className
string
Utility class names to be provided to Col.
colEnd
number
Cell ends at given column.
colSpan
number
Cell spans to given number of cells.
colStart
number
Cell starts from given column.
lg
object
Responsive layout for lg breakpoint.
md
object
Responsive layout for md breakpoint.
rowEnd
number
Cell ends at given row.
rowSpan
number
Cell spans to given number of rows.
rowStart
number
Cell starts from given row.
sm
object
Responsive layout for sm breakpoint.
xl
object
Responsive layout for xl breakpoint.
xs
object
Responsive layout for xs breakpoint.

You can check the implementation of the component for more details.

Grid Exports

You can import this module like so:

import {Col} from 'spaceweb/grid'

It exports the following components or utility functions:

  • Col
  • Grid
  • default