Menu
I'm looking to start styling my React app. I have previously used Bootstrap's Grid system and am now looking for the React grid system. What do React developers commonly use for their App's Grid system / Layout?
324
Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
sm, small: ≥ 576px. xs, extra-small: < 576px.
The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts. Material UI for React has this component available for us and it is very easy to integrate. We can the Grid component in ReactJS using the following approach.
If you are targeting only modern browsers (i.e. those with flexbox support) you may want to investigate react-flexbox-grid which offers a set of React components that implement the usual grid concepts like Row and Column. I've used in successfully in a couple of projects.
This option avoids the need to pull in a whole UI library and only use the grid portions.
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
