react-cellblock icon indicating copy to clipboard operation
react-cellblock copied to clipboard

Rows always appear to be 960px

Open JasonWeise opened this issue 9 years ago • 2 comments

Hi First off, this is one of the best grid layout systems I have found. I hope this isn't a daft question but I cannot seem to get Columns to span 100% width of the page as the Row component seems to be locked at 960px for example if I have:

        <Grid>
            <Row>
                <Column width="1/2">Col3</Column>
                <Column width="1/2">Col2</Column>
            </Row>
            <Row>
            <Column>A super special line of text</Column>
            </Row>
            <Row>
                <Column width="1/3">Col3</Column>
                <Column width="2/3">Col4</Column>
            </Row>
        </Grid>

None of the columns are 100% width. I think it works if I remove the Row component surrounding the Column but that isn't what I the readme says to do.

Also... how to make a column 100% height of the page, say for a SideNav components.

Any advice? (I might be missing the obvious LOL).

Thanks in advance :)

JasonWeise avatar Feb 18 '16 08:02 JasonWeise

For your first question, if you want something full width you can certainly put a non grid element between two rows. That is why the grid itself doesn't constrain anything and the top level rows do. the columns them selves will only ever be full width if they are on a flexible break point. The reasoning for this decision (which maybe was the wrong decision) was that if we let the largest breakpoint flex to the screen size there is no known maximum width. As a result, in that edge case your components' pixelwidths would report Infinity and all your component logic would have to take that into account. I think there is probably a better solution, but that is how it works currently.

About the side nav, I am honestly not sure. I think it would depend on if you want it inside the grid, or if you want it totally outside the grid (which I assume is the case). If it is outside the grid, it may get tricky if you need to leave that space and the grid is actually not centered. I think to leave a space like that may require some extra options, but i'm not sure.

Does any of that help?

skiano avatar Feb 18 '16 14:02 skiano

I am going to think about this as an enhancement, and look for a way to support it

skiano avatar Apr 06 '17 17:04 skiano