Set Grid.props.columns={12} to 100% of width

Steps

<Grid columns={12}>
  <Grid.Row>
    <Grid.Column width={3}>...</Grid.Column>
    <Grid.Column width={6}>...</Grid.Column>
    <Grid.Column width={3}>...</Grid.Column>
  </Grid.Row>
</Grid>

Expected Result

I expect that the columns will now be 100% width, since 12 should be the full amount of columns. (3 + 6 + 3 = 12).

Actual Result

Eventhough i set Grid.props.columns to 12, the full with is still calculated to be 16, so the 12 columns are not 100% of the width, but instead 75% of the width.

Version

0.68.4

[brianespinosa]

@jacknevitt you’ll want to ask that question on the core SUI project for more clarity on that decision. This React project is intended to replicate markup/functionality of that core project in a React way.

[brianespinosa]

@webberwang Please open a new issue with what you are trying to accomplish.

For anyone else landing here:

The width of your Grid column are either defined by setting the columns count on Grid or setting the width (out of 16) individually on a Grid.Column. The Grid component also accepts some other responsive values to columns like “equal”.

Grid.Row will also accept the same values as Grid if you want to control columns differently by row.

Mixing control between Grid/Grid.Row and Grid.Column is not advised. You need to decide to control width per column, or via the parent row or grid.

If you feel like you need to have a different grid system with a different count of columns and gutter widths, you’ll need to build your own CSS with build tools for SUI.