Grrrid

The only CSS grid framework you'll ever need. View Demo.

Features

• Configurable
• Responsive
• Works with CSS Modules and BEM
• ES6 compliant
• Tuned for performance

Usage Example

Include grrrid.css in your project, apply the grrrid class to the parent element whose children you want to be grid items, and optionally set the itemWidth and gridGap CSS variables.

<section style="--itemWidth: 12rem; --gridGap: 1rem" class="grrrid">
  <img src="https://picsum.photos/400">
  <img src="https://picsum.photos/400">
  <img src="https://picsum.photos/400">
  <img src="https://picsum.photos/400">
  <img src="https://picsum.photos/400">
  <img src="https://picsum.photos/400">
  <img src="https://picsum.photos/400">
  <img src="https://picsum.photos/400">
</section>

License

Attribution 4.0 International

Made with a certain amount of tongue in cheek by Mottokrosh.