0

I'm using Grommet React library for ux. I'm working on a phone layout project.

I've a prop from redux state that represent an array of element. The initial state is empty array and, after server returning, the props will be

[{ country: 'England' }, { country: 'Germany' }, { country: 'Spain' }, { country: 'Zimbawe' }]

What I want is a column layout with exactly two columns by row where each column get 50% of available space.

To do so I've used the Column component in this way

<Columns responsive={false}>
    {this.props.countries.map(this.renderCountries)}
</Columns>

And finally the renderCountries method

renderCountries (country) {
    return <Box key={country.country}>{country.country}</Box>
}

But with this code the system will render only one element by row. How can I get two columns by row?

Thanks in advance

user2540463
  • 112
  • 1
  • 3
  • 10

1 Answers1

0

According to Grommet Docs for Columns layout is going to be calculated by the component itself.

What you can do is to set props for Columns and Box to achieve desired layout is, you can give size prop for Columns and Box and combine it with the maxCount prop.

maxCount number

Number of columns to allow for masonry option, based on component width. Responds based on the width of the column children (set with size).

size small|medium|large

The width of each column. Defaults to medium.

For Example

Below example will assure you would have maximum 2 columns if the device/window/parent width is enough to fit in. Otherwise its gonna show 1 column.

<Columns maxCount={2} size="large" responsive={false}>
    {this.props.countries.map(this.renderCountries)}
</Columns>

renderCountries (country) {
    return <Box key={country.country}>{country.country}</Box>
}

Other than these props you can also play with Box component props to achieve desired layout.

bennygenel
  • 23,896
  • 6
  • 65
  • 78
  • The propblem is with min number of columns. Because I work on mobile the Column component show always only one column per row. So your answer not help me at all. – user2540463 Sep 16 '17 at 10:12
  • Did you tried to set size of the boxes like shown in the docs? – bennygenel Sep 16 '17 at 10:19
  • Yes. Columns width will reduce but remains one per row. If I set masonry={true} than I got an error when data is empty array Cannot read property 'childNodes' of undefined – user2540463 Sep 16 '17 at 10:23
  • Did you try to set `basis` of boxes to `1/2` and making them half width? – bennygenel Sep 16 '17 at 10:26