flexgrid-js
is customizable implementation of flexboxgrid.css built using the features of jss, providing the functionality of the 12 column grid with a simple API.
flexgrid-js
is available as an npm package
npm install @lalomts/flexgrid-js
yarn add @lalomts/flexgrid-js
The grid uses the flexboxgrid.css attributes by default. In order to override them, you need to pass an object as argument to the .grid()
method.
const gridConfig = {
gutterWidth: 16,
outerMargin:8
}
<div className={ FlexGrid.grid(gridConfig)}> </div>
Rows can also have several attributes that can be customized in relation to the viewport's width. To configure a row, you pass an object to the .col()
method.
const rowConfig = {
align: {
xs: ['bottom'],
lg: ['center']
}
}
<div className={ FlexGrid.row(rowConfig)}> </div>
Just as with rows, columns' attributes need to be configured with an object value passed to the .col()
method. There's no need to specify a value for each viewport size, just add the needed viewport values to the desired attribure keys.
const colConfig = {
size: {
xs: 9,
md: 3,
lg: 6
},
reverse: {
xs: true
},
hidden: {
lg: true
}
}
<div className={ FlexGrid.col(colConfig)}> </div>
import FlexGrid from '@lalomts/flexgrid-js'
class Home extends Component {
render() {
const columnConfig = {
size: {
xs: 9,
md: 3,
lg: 6},
offset: {
xs: 4,
xl: 2
}
}
return (
<div className={ FlexGrid.grid({ gutterWidth: 8, xl: 1400 })}>
<div className={FlexGrid.row({ reverse: true })}>
<div className={FlexGrid.col( columnConfig )}>
//Your content
</div>
</div>
</div>
)
}
}
The attributes and possible values for each element of the grid:
The attributes to customize the grid element
Attribute | Description | Values | Example |
---|---|---|---|
gutterWidth | The space between each of the grid's columns | Number | gutterWidth: 16 |
outerMargin | The margin (left and right) of the container | Number | outerMargin: 32 |
xs | The min screen width the x small viewport size | Number | xs: 0 |
sm | The min screen width the small viewport size | Number | sm: 578 |
md | The min screen width the medium viewport size | Number | xs: 768 |
lg | The min screen width the large viewport size | Number | lg: 992 |
xl | The min screen width the x large viewport size | Number | xl: 1250 |
The attributes to configure the row element
Attribute | Description | Values | Example |
---|---|---|---|
align | How the elements should be aligned inside a row for a specific viewport size | Array: start, center, end, top, bottom, middle | align: {xs: ['bottom', 'center', xl: ['start']} |
dist | How the elements should be distributed inside a row for a specific viewport size | around, between | dist: { xs: 'around' } |
reverse | Reverse the order of the elements inside a row | Bool | reverse: true |
The attributes to configure the column element
Attribute | Description | Values | Example |
---|---|---|---|
size | How many of the grid columns should be used at a specific viewport size | Number: 1-12 | size: {sm: 6, xl: 8} |
offset | The offset of a column at a specific viewport size | Number: 1-11 | offset: {sm: 2, xl: 4} |
reorder | Forces a column to appear at a different order for a specific viewport size | first, last, initialOrder | reorder: {sm: 'first', xl: 'initialOrder' } |
hidden | Hides a column at a specific viewport size | Bool | hidden: true |
reverse | Reverse the order of the elements inside a column | Bool | reverse: true |