A simple flex-based column/grid component for React.
yarn add columns3000
import {Columns, Column} from 'columns3000';
// in render
<Columns
columns={12}
justify="flex-start"
// Gutter With units! use px, rem, vw, etc, even css variables or calc()!
gutter="16px"
breakpoint="720px"
>
<Column span={6}>This is column spans 6!</Column>
<Column span={6}>This is column spans 6 too!</Column>
</Columns>;
Responsive gutters, span or columns?
I suggest using useMedia
from react-use
like below:
import {Columns, Column} from 'columns3000';
import {useMedia} from 'react-use';
const isNarrow = useMedia('(max-width: 1024px)');
const span = isNarrow ? 2 : 4;
const gutter = isNarrow ? '16px' : 'var(--gutterLarge)';
// in render
<Columns
columns={12}
justify="flex-start"
// Gutter With units! use px, rem, vw, etc, even css variables or calc()!
gutter={gutter}
breakpoint="720px"
>
<Column span={span}>Spans 4 on width > 1024 and 2 below!</Column>
<Column span={span}>Same!</Column>
<Column span={span}>Same!</Column>
<Column span={span}>Same!</Column>
</Columns>;
Property | Type | Description | Default value |
---|---|---|---|
columns | number | total number of columns of the grid system | 12 |
justify | string | css property justify-content, alignment of inner columns | flex-start |
gutter | string | the horizontal/vertical spacing between columns | 16px |
breakpoint | string | the viewport width where single/multi-column layout is toggled | 720px |
Property | Type | Description | Default value |
---|---|---|---|
span | number | amount of columns the columns spans horizontally | required prop |
grow | boolean | flex-grows the column | false |
If you're like me who:
- Works with React most the time
- Usually going for css-in-js, particularly
emotion
. (Note: this uses emotion!) - Finds themselves considering to reach out for a no-frills super simple column/grid layout wrappers
- Likes it simple and cute
Look no further! I tried to basically make a component to make myself happy for
most of the use cases I do/would encounter. This does not use any other
classNames
or some imported css. I think it's "clean" in it just uses emotion
generated classnames, and takes advantage of css variables to make it do its
thing.
A Columns
parent and Column
wrapper components. Togehter they do these
things:
- Define a grid layout based on a number of columns and gutter size
- Each column (child) within the grid layout would
span
a specified number of columns - When a breakpoint is reached, toggle between single-column ("mobile") or multi-column configurations
That's it!
Enjoy 🌸