react-inline-grid
react-inline-grid copied to clipboard
Number of columns for tablet & phone
Hello,
I've been using this library to make grids on a site. It works great when there's an even number of columns (I particularly like how it handles vertical alignment), but when I need to make a grid with 3 columns, I'm unable to use it for responsive widths - tablet & phone.
As far as I can tell, I'm unable to customize the number of columns for smaller media. Is this the case? I've been trying to set the number of columns like so;
const options = {
gutter: 16,
margin: 16,
list: [
{
name: 'phone',
columns: 12,
query: '(max-width: 479px)'
},
{
name: 'tablet',
columns: 12,
query: '(min-width: 480px) and (max-width: 839px)'
},
{
name: 'desktop',
columns: 12,
query: '(min-width: 840px)'
}
]
};
return (
<Grid options={options}><Row>
<Cell is="4 tablet-2 mobile-6">
{content}
</Cell>
</Row></Grid>
);