Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Number of columns for tablet & phone #13

Open
jpfiorilla opened this issue Mar 2, 2017 · 0 comments
Open

Number of columns for tablet & phone #13

jpfiorilla opened this issue Mar 2, 2017 · 0 comments

Comments

@jpfiorilla
Copy link

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>
  );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant