Grid

I believe we should be striving to move away from responsive behaviour being dependent on media query breakpoints — like those offered by grid libraries — where possible. However, grid libraries are arguably easier for most developers to understand compared to working directly with CSS flex and grid.

• https://css-tricks.com/thinking-in-behaviors-not-screen-sizes

Suggestions

The following are hand-picked and come equipped with all the features you'd expect from a good grid library.

Bare in mind that some of these libraries may not be appropriate to use with the approach to Conditional Viewport Rendering due to a lack of configurable breakpoints.

react-grid-system

https://github.com/sealninja/react-grid-system

• Configurable breakpoints, defaulting to Bootstrap 4 breakpoints
• Visible and Hidden utility components
• Add ScreenClassProvider for a significant performance increase

flexboxgrid

http://flexboxgrid.com

• Plain HTML & CSS, not React components
• How to set gutter, margin and breakpoins to my needs?

ant.design/grid

https://ant.design/components/grid

• Bundle size is notably large
• Row and Col from the following example don't support as

import { createGlobalStyle } from 'styled-components';

import { Row, Col } from 'antd/lib/grid';
import gridStyles from 'antd/lib/grid/style/index.css';

const GridStyles = createGlobalStyle`
  ${gridStyles}
`;

export {
  GridStyles,
  Row,
  Col
};