Cell Offsets

[prashaantt]

I have a silly question: how do I center a single Cell inside a Grid?

<Grid>
  <Cell/>
</Grid>

I want to be able to give the Cell a certain width, but want to keep it horizontally in the center. I have tried doing this with adding empty Cells before and after, but I don't think that's the right way of doing it.

Edit: Basically I'm looking for the radium-grid's equivalent of Bootstrap's offset.

[alexlande]

Hey @prashaantt. We don't currently support this behavior, but we probably should.

As a workaround, you can apply a justifyContent rule yourself to the Grid component:

<Grid cellWidth="1/3" style={{ justifyContent: "center" }}>
  <Cell />
</Grid>

/cc @tptee

[tptee]

Hi @prashaantt! I'm not sure how long it'll take, but I think offsets would be useful. I'll keep this on my radar!

[prashaantt]

Thanks @tptee, will watch out for the update.

Thanks @alexlande, will give that a try.

[mrsufgi]

seems like using justifyContent: "center" breaks the gutter.

[mhornung]

Why not just create a Component which has the single purpose of padding the extra space? Since the space-between approach only creates the expected gutter for widths that add up to 1 for each wrapped line, this is something that is sorely needed for even slightly more complex layouts.

I would suggest an Offset component pretty similar to the Cell simply without accepting children (and maybe even with the feature of using up exactly enough space so the correct gutter is created).

[manu-unter]

@mrsufgi the justifyContent: center approach will only work if you have a single element that should be centered. For multiple elements, it will eliminate the gutter between them. In that case, you would need empty placeholder Cells, I'm afraid.

[mrsufgi]

@cryza you are correct, I ended up doing just that