react-inline-grid icon indicating copy to clipboard operation
react-inline-grid copied to clipboard

Number of columns for tablet & phone

Open jpfiorilla opened this issue 7 years ago • 0 comments

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>
  );

jpfiorilla avatar Mar 02 '17 22:03 jpfiorilla