search

IBM / css-gridish

Automatically build your grid design’s CSS Grid code, CSS Flexbox fallback code, Sketch artboards, and Chrome extension.
https://ibm.github.io/css-gridish/
Other
2.25k stars 113 forks source link

How does css-gridish work with container having max-width? #15

Closed benxgao closed 6 years ago

benxgao commented 6 years ago

As css-gridish using 100vw / 12 = 8.3333vw for each column width, rather than using 8.3333% for each one, how to make it work like a grid system that has container has max-width with auto margin on left and right side?

seejamescode commented 6 years ago

Hi @benxgao! When you say container, do you mean the entire page? If so, that is what CSS Gridish assumes. In your css-gridish.json, the last breakpoint listed becomes the max width.

j1mie commented 6 years ago

Just to clarify, Gridish assumes that the grid occupies the full width of the page, hence the use of vw?

I think this is definitely a good direction to take, but in practise, our team has many designs where elements live outside of the grid, so this is preventing us from adopting Gridish.

seejamescode commented 6 years ago

Hey @j1mie, do you mean the page does a horizontal scroll? That is definitely a design assumption we make. I would love for an eventual workaround when display: subgrid is available.

j1mie commented 6 years ago

Hi @seejamescode - it doesn't do a horizontal scroll, but because the grid assumes it'll occupy 100vw, rather than 100%, so extra elements cannot float alongside it, like a sidebar etc.

Our designs follow similar patterns to Material layouts, that 'squeeze' the grid if extra elements appear on the page.

If this is counter to your design assumptions we can continue looking at adapting our work to a 100vw grid

seejamescode commented 6 years ago

Oh, completely gotcha. I have pulled off the 'squeeze main content on sidebar open' that you are explaining.

It does require that both the grid-column is increased for the sidebar and decreased for the main content. The more difficult part of it is the animation because of CSS Grid.