A flexbox-based grid system for React built with styled-components.


flexomatic aims to be a very simple, lightweight grid system with a flexible API that allows you to get up and running in seconds. It is based on the methodology proposed in Solved by Flexbox, where the goal is to expose a minimal grid system that doesn't weigh the user down with a multitude of options.


  • Each Cell component is the same width by default
  • Full control over individual Cell components, including width and alignment
  • Responsive, with media query support
  • Nested Grids

Getting Started

  • Make sure styled-components is installed in your project
  • yarn add flexomatic
  • See the docs for examples and usage! 🚀