How to fill in grid | Mantine | Page 1

scenic arrow Mar 10, 2024, 4:45 AM

#

Hey there, I am using a Grid and wanting to fill in the middle column. Ideally the card below in the middle column would move up so it sits directly below the card above it.

#

Or am I better off using Group and Stack?

prisma atlas Mar 10, 2024, 5:08 AM

#

did you try flex={1} on the middle col ?

scenic arrow Mar 10, 2024, 5:17 AM

#

As in something like this?

<Grid>
  <GridCol span={4}/>
  <GridCol span={4} />
  <GridCol span={4}/>
  <GridCol span={4} offset={4}/>
</Grid>

strange path Mar 10, 2024, 5:20 AM

#

height: 100%?

magic mango Oct 27, 2024, 11:38 PM

#

Facing similar issue
Tried flex={1}, didn't work.

<Grid.Col span={{ base: 12, md: 12, lg: 4 }} flex={1}>

Using SimpleGrid makes(stretches) all columns to same height and solves the issue. But I want to do the same using Grid, as my columns are not supposed to have same width.

Any other recommendations ?

@scenic arrow
Were you able to solve this ?

#

@prisma atlas
Hi Jon,
flex={1} didn't work do you have any other recommendation?
Thanks

#

@strange path
Hi Gary

    span={{ base: 12, md: 12, lg: 4 }}
    style={{ height: "100%" }}
>```
height: 100%, didn't work
Any other recommendations ?
Thanks

#How to fill in grid