YOUR NEW GRID (Made by Tone)

This project gives you a simple yet powerful grid system built with Webflow and custom CSS. We keep it clear and modular and try to consistently use the Client‑First approach.

Our grid is inspired by bento boxes and masonry. Instead of a giant grid with 50 items that is hard to tweak, we suggest you work with a single grid that shows about 8 items per instance. This way, customization remains simple and your layout stays neat.

HOW IT WORKS?

The grid is built to be flexible and smart. The first grid item you add defines the look of the grid. That’s why you should start with the base item—a perfect square. Use the base class grid__item on every grid element, then add one modifier to change its size.

BASE CLASS

• grid__item: The core class for every grid item. Always begin here.

SIZES & SPAN VARIANTS

• grid_item--1x1: A standard square cell (1 column x 1 row). This is your starting point.
• grid_item--wide-2x1: Spans 2 columns in width, staying 1 row high.
• grid__item--big-2x2: A larger square, taking up 2 columns and 2 rows.
• grid_item--wide-3x1: Extends across 3 columns by 1 row. Great for banners.
• grid_item--wide-5x1: Stretches across 5 columns for a dramatic look.
• grid_item--tall-1x2: Occupies 1 column and stretches vertically over 2 rows.
• grid__item--big-3x3: A bold item that spans 3 columns and 3 rows for featured content.
• grid_item--tall-1x3: A tall item that takes up 1 column and 3 rows.
• grid_item--tall-1x5: Extra tall, covering 1 column and 5 rows. It adds strong vertical emphasis.
• grid_item--huge-4X5: A huge item spanning 4 columns and 5 rows, perfect for key elements.
• grid_item--huge-5x4: Similar to huge, but with a 5x4 layout for a different balance.
• grid_item--big-2x3: Spans 2 columns by 3 rows, giving extra vertical space.
• grid_item--tall-3x5: Extends over 3 columns and 5 rows for a dramatic look.
• grid_item--wide-5x1-ana...: A special wide variant (5 columns by 1 row) with extra style tweaks. ("ana" marks an alternative style.)
• grid_item--thumb: A smaller variant optimized for thumbnails or previews.

RECOMENDATIONS & BEST PRACTICES

• Start Small: Always begin with grid_item--1x1. This square defines the grid. Your first item sets the tone.
• Fibonacci Scale: Use a Fibonacci scale (1, 1, 2, 3, 5) when ordering items. It keeps the design natural and balanced.
• Stick to a Single Grid: Focus on a single grid showing about 8 items at a time. A smaller grid is easier to customize than one with 50 items.
• Reorder Freely: The grid is designed to be flexible. Move items around as you need. The system adapts gracefully across devices.
• No Extra Code Needed: All sizing and spacing are set via these CSS classes. Just add the right class to your element in Webflow.
• Keep It Simple: There are many JavaScript solutions to enhance grid behavior. However, we keep it simple to give you full control without added complexity.

HOW TO USE THIS CLONABLE?

1. Clone the Project: Click the “Clone Project” button to add this project to your Webflow dashboard.
2. Review the Documentation: Check back here for guidance on using the grid classes.
3. Build Your Layout: Start with a basic grid item (grid__item grid_item--1x1). Then add modifiers (e.g., grid_item--wide-3x1) using the Fibonacci sequence (1, 1, 2, 3, 5) for balance.
4. Experiment and Customize: Reorder items and adjust modifiers to suit your design. This project is free and fully customizable.

This documentation is meant to be clear and simple. Enjoy building dynamic, responsive layouts with the FREE MASONRY BENTO GRID (CLONABLE)! I WILL, CHECK THEM IN USE IN MY WEBSITES..