I found something weird while working with react-bootstrap. I have nested rows in columns, but I realised that it's impossible to make one of the rows fill up all available space in the column (essentially flex-grow:1) because Col of react-bootstrap is not a flex item. Does anyone know what the best practice in this case is? Is it to add display: flex to the column so that behaves like a flex item, or make all the "intermediate" layers in the grid Rows (either horizontal or vertical) and only use Cols as the last layer?
I've tried that both the solutions I've listed work, I'm just trying to write neat code
Yes that's true, Col component in React-Bootstrap is not a flex item, So if you want to make one of the rows fill up all available space in the column, you can add display: flex to the Col or use Row components as the intermediate layers in the grid and only use Col components as the last layer.
Both solutions are valid and will work, so the choice ultimately depends on your personal preference and the structure of your code. If you want to keep your code clean and organized, using Row components as the intermediate layers may be a better choice, as it makes the structure of your grid more explicit and easier to read. However, if you prefer to keep the number of nested components to a minimum, adding display: flex to the Col may be a better option.
Another possible solution to consider is to use the flex prop provided by React-Bootstrap to set the flex properties of the Col. For example, you can set the flex prop to 1 to make the Col fill up all available space: <Col flex={1}>Column 2</Col>, This can be a cleaner and more concise solution than using display: flex or adding Row components.