Align items in a grid with Row and Column

[svtkn]

Hi

I am trying to use the Row and Column grid to align a few items.

<Grid>
  <Row>
    {#each cols as col}
    <Column>{col}</Column>
    {/each}
  </Row>
  <Row>
    <Column>1</Column>
    <Column>2</Column>
    <Column>3</Column>
    <Column>4</Column>
    <Column><TextInput>12</TextInput></Column>
  </Row>
  <Row>
    <Column>1</Column>
    <Column>2</Column>
    <Column>3</Column>
    <Column>4</Column>
    <Column><TextInput>12</TextInput></Column>
  </Row>
  <Row>
    <Column>1</Column>
    <Column>2</Column>
    <Column>3</Column>
    <Column>4</Column>
    <Column><TextInput>12</TextInput></Column>
  </Row>
</Grid>

This is how it appears if I add the TextInput

I tried setting min-width to 0, and it doesnt fit the size of the column. How do you include other components in a Grid and keep them aligned ?

[metonym]

Form inputs like TextInput have an intrinsic min-width, and flex/grid children default to min-width: auto, so they resist shrinking inside a Column. Apply min-width: 0 to a wrapper around the input so the column can shrink.

1. Wrap the TextInput in a shrinkable container

<Grid>
  <Row>
    <Column>1</Column>
    <Column>2</Column>
    <Column>3</Column>
    <Column>4</Column>
    <Column>
      <div class="grid-input-wrapper">
        <TextInput value="12" />
      </div>
    </Column>
  </Row>
</Grid>

<style>
  .grid-input-wrapper {
    min-width: 0;
    width: 100%;
  }
  .grid-input-wrapper :global(.bx--text-input) {
    max-width: 100%;
  }
</style>

2. Or target the Column directly

<Column class="grid-col-shrink">
  <TextInput value="12" />
</Column>

<style>
  :global(.grid-col-shrink) {
    min-width: 0;
  }
  :global(.grid-col-shrink .bx--text-input) {
    max-width: 100%;
  }
</style>

3. Use explicit column spans

Give the input column a fixed span so layout is predictable:

<Row>
  <Column lg={2}>1</Column>
  <Column lg={2}>2</Column>
  <Column lg={2}>3</Column>
  <Column lg={2}>4</Column>
  <Column lg={4}>
    <div class="grid-input-wrapper">
      <TextInput value="12" />
    </div>
  </Column>
</Row>

4. Combine wrapper and overflow

If the input still overflows:

.grid-input-wrapper {
  min-width: 0;
  width: 100%;
  overflow: hidden;
}