How to make a column layout in grommet

Question

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

Answer 1

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.