AI Grid Generator.

A grid is the layout you choose when every item in a collection deserves the same footprint — product cards, post cards, photo tiles. Describe what you are displaying and MeDo generates equal-width tracks, responsive column counts, auto-fit behavior, and aspect-ratio-locked cells with loading and empty states built in.

Equal Cells Are a Promise, Not a Default

A grid does one thing and does it visibly: it gives every item in a collection the same footprint at a position the visitor can predict. That uniformity is a claim — all twelve products, all eight posts, all sixteen photos matter equally — and it is also an interface: after the second row the eye knows exactly where the next thing will appear, so scanning speed comes from the layout itself. Which makes the honest decision triage, not styling. The moment one item genuinely matters more than the rest, a uniform grid starts lying, and an emphasis-by-area variant is the right tool instead. The moment items carry intrinsic, unrepeatable heights, forcing equal cells means cropping, and a free-height layout is the right tool instead. The discipline that keeps the promise is the aspect ratio: pick one ratio per collection and hold it everywhere, because mixed ratios inside equal cells produce either whitespace scars or cropped subjects, and both read as neglect.

4 قالبًا

قوالب Grid التي يمكنك توليدها

كل قالب هو طلب حقيقي لا صورة. انسخه إلى أي محرّر ذكاء اصطناعي، أو شغّله في MeDo لتحصل على كود React و Tailwind مباشرة.

BaselineEqual Columns

Fixed Column Counts per Breakpoint

The explicit version: you name the column count at each width, so the layout is exactly what you approved on every device.

Create a uniform grid with explicit column counts per breakpoint: 1 column below 640px, 2 between 640 and 1024px, 3 above 1024px, implemented with grid-cols classes and a 24px gap. Twelve cards, each with a 4:3 image, a title, and one metadata line, all cells equal height with content top-aligned. Include a skeleton card per loading slot and an empty state that spans the full row. Do not let any card exceed its track — truncation and object-cover handle overflow.

جرّبه في MeDo

Zero breakpointsAuto-Fit

Self-Adjusting Track Count

The container decides how many columns fit. The auto-fill versus auto-fit difference only shows up with few items — which is exactly when it embarrasses you.

Create a card grid using repeat(auto-fit, minmax(260px, 1fr)) so the number of columns is decided by the container, not by breakpoints. Include a second example with auto-fill and explain the difference when only two items exist: auto-fit stretches them across the full row, auto-fill keeps empty tracks at column width. Cards have a 1:1 image, a title, and a price row anchored to the cell bottom so heights stay equal however wide the tracks stretch. Show the grid with 8 items and with 2 items so both behaviors are visible in the preview.

جرّبه في MeDo

Hole-freeDense Pack

Dense Packing for Mixed-Span Tiles

A mosaic where larger tiles leave holes and the algorithm backfills them. Powerful, with a documented cost to visual order.

Create a mosaic grid where tiles have varying column and row spans — some span 2 columns, some span 2 rows — with grid-auto-flow: dense so holes left by larger tiles are backfilled by later small ones. Use grid-auto-rows of 120px and let row spans multiply it. Provide 14 items with mixed spans and show the packed result. Add a code comment stating plainly that dense flow reorders items visually against DOM order, so this layout suits photo walls and mosaics, not ranked results.

جرّبه في MeDo

MediaRatio Wall

Uniform Media Wall With Hover Captions

The grid at its most photographic: one ratio, edge-to-edge frames, and metadata only on demand.

Create a uniform media wall for 16 photos: square cells via aspect-square, images with object-cover so every frame fills without distortion, no card borders — the images sit edge-to-edge with a 4px gap. On hover, dim the image and fade in a caption bar with title and date at the bottom. Below 640px show 2 columns, above it 4. While each file streams in, show a placeholder color derived from the image's dominant tone so the wall never flashes white.

جرّبه في MeDo

كيف تخصّص Grid الخاص بك

Rule on equality before you style anything

A uniform grid asserts that every item matters as much as its neighbors. If one item genuinely outranks the rest, generate a bento grid instead — area, not position, is how emphasis gets encoded. Deciding this after generation means regenerating the whole layout.

Pick auto-fill or auto-fit, and know which you asked for

auto-fill keeps reserving tracks for items you might add; auto-fit collapses empty tracks and stretches what remains. With two items in a wide container they look like opposite layouts. Name the one you want so a thin preview dataset does not surprise you.

Lock one aspect ratio per collection

State the ratio in the prompt — 1:1 for products, 16:9 for video, 4:3 for editorial covers — and require object-cover inside a fixed-ratio box. The ratio is what lets cells stay equal without knowing the images; without it, every odd-shaped source breaks a row.

Permit dense packing only where order is weak

grid-auto-flow: dense backfills the holes left by larger tiles, but the backfill reorders items visually against DOM order. Photo walls gain; ranked results, queues, and anything where position means rank lose — both for reader trust and for screen-reader coherence.

من يستخدم مكوّن Grid

E-commerce category page

Twelve to forty-eight product cards in a 2-column mobile and 4-column desktop grid, every image cropped to one 4:3 ratio so the wall reads as a single object, with skeleton cards while the category loads.

Blog and post collection

Post cards of equal footprint — cover, title, date, reading time — where the uniform cells signal that no article outranks another and the reader picks by title alone.

Template or plugin marketplace

Hundreds of same-shape cards with price and rating anchored to the same corner of every cell, so comparison happens across rows at a glance instead of hunt-and-peck.

Video and media library

A 16:9 thumbnail wall where the shared ratio is the contract: duration badge bottom-right, title underneath, hover preview inside the cell without anything resizing.

أنماط Grid لمواقع مختلفة

المكوّن grid نفسه، مُهيّأ لنوع الموقع الذي يُنشر عليه.

01 / 04

E-commerce Category and Search Pages

Uniform product cards are the whole shopping interface: one ratio for every photo, price and rating in the same cell corner everywhere, 2 columns on mobile where thumb-reach decides the tap.

أنماط Grid وتنويعاته

اختر التنويعة التي تناسب بقية الصفحة، ثم ولّدها.

01 / 04

Bordered Card Grid

Each cell a rounded, 1px-bordered card with a 24px gap. The border does the grouping, so it suits items with text-heavy bodies — products, posts — where the eye needs a per-item container.

Grid في React و Next.js و Vue و Svelte

React و Next.js و Vue 3 و SvelteKit و Astro أو HTML صِرف — المكوّن grid نفسه بست طرق للإضافة.

01 / 03

React Grid

The empty check guards the whole grid, and the keyed map keeps DOM order equal to visual order — the invariant that makes a uniform grid scannable. Responsive columns are plain classes, so resizing costs no JavaScript.

src/components/Grid.tsx

type Item = { id: string; title: string; image: string; price: string }

export function Grid({ items }: { items: Item[] }) {
  if (!items.length)
    return <p className="py-16 text-center text-zinc-500">No items found</p>
  return (
    <ul className="grid grid-cols-2 gap-6 md:grid-cols-3 xl:grid-cols-4">
      {items.map((item) => (
        <li key={item.id} className="group">
          <img
            src={item.image}
            alt={item.title}
            loading="lazy"
            className="aspect-[4/3] w-full rounded-lg object-cover"
          />
          <h3 className="mt-3 text-[15px] font-semibold">{item.title}</h3>
          <p className="mt-1 text-sm text-zinc-500">{item.price}</p>
        </li>
      ))}
    </ul>
  )
}

كيف تضيف Grid إلى مشروعك

أربع خطوات، من اختيار قالب grid إلى إطلاقه في الإنتاج.

01~1min

Rule on Equality First

Confirm every item deserves the same footprint. If one item must dominate the section, that is a bento grid — say so in the prompt instead of fighting a uniform layout into hierarchy.

02~1min

Choose the Track Model

Fixed column counts give you exact control per device; auto-fill with a minimum width adapts to any container with no breakpoints. Name the minimum track width — it is the number the whole layout hangs on.

03~2min

Generate and Check the Crops

Generate the grid, then look specifically at what object-cover amputates from your real images. Adjust the ratio before adjusting anything else — the ratio is the one decision every cell inherits.

04~2min

Exercise the Odd Counts

Preview with 1 item, 2 items, and 13 items — the orphan row is where auto-fill and auto-fit visibly disagree — plus the empty and loading states. Whatever looks odd at these counts is a prompt fix — describe the orphan-row behavior you want instead of hand-editing classes after the fact.

أسئلة شائعة حول Grid

How do I generate a responsive grid without writing media queries?

Ask for repeat(auto-fill, minmax(240px, 1fr)) as the grid template. The browser counts how many 240px tracks fit the container and stretches them equally, so column count responds to every resize — including container-driven layouts inside sidebars — with no breakpoints at all. In Tailwind, express it as the arbitrary value grid-cols-[repeat(auto-fill,minmax(240px,1fr))]. Choose a minimum width close to your ideal card width so tracks never get cramped.

Should I use a grid or a bento grid for my feature section?

Decide with one question: do all the items deserve the same visual weight? A uniform grid says yes — every cell equal, scanning by position. A bento grid says no — one hero cell takes a larger area because it carries the story, and the small cells become footnotes. Feature sections usually have a hero, which is why they end up bento; collections of genuinely equal items — products, posts, photos — stay uniform grids. Generating a bento for equal items invents hierarchy you did not intend.

How do I choose between grid, list, and masonry?

Look at the items, not the aesthetics. If every item can share one aspect ratio and none outranks another, use a grid. If each item is a record the user triages and acts on — metadata, states, row actions — use a list. If every item carries its own natural height that cropping would damage, use masonry. Product walls and post cards are grids; inboxes and queues are lists; portfolios and moodboards are masonry. Two of the three will always be visibly wrong for your content — that is the test working.

How do I handle images of different sizes inside equal cells?

Fix one ratio per collection, render each image inside a box locked to that ratio, and crop with object-cover so the frame always fills. State the ratio and the cover behavior explicitly in the prompt — that is where the discipline lives. If cropping would cut off the subject, as with fashion, architecture, or artwork, the collection is telling you it wants masonry, which preserves every image's natural height instead of forcing one shared cell shape.

What does grid-auto-flow: dense do, and when should I avoid it?

Dense packing lets the algorithm backfill holes: when a large tile leaves a gap a later small tile could fit, the small tile moves up into it. The cost is that visual order stops matching DOM order — item eleven may appear above item four. Decorative mosaics and photo walls gain; anything where position encodes meaning, such as ranked results or step sequences, must not use it, both for reader trust and for screen-reader coherence.

What should a grid show while loading, and when it is empty?

Generate skeleton cards with the exact footprint of a real card — same ratio, same paddings — so the layout does not jump when data arrives. The empty state should span the full grid width, centered, with the reason and a recovery action such as clearing filters. Both states cost one prompt sentence each, and they are the difference between a layout that feels engineered and one that feels unfinished the first time an API hiccups.

بناء grid الخاص بك الآن.

جرّب أي أمر — مجاني وبدون تسجيل.

ابدأ البناء مجاناً عرض الأسعار

Bento Grid

Describe your product's story and MeDo generates a bento grid — one large hero cell that carries the narrative, smaller cells that carry the detail, and the freedom to mix a screenshot, a live stat, and a customer quote inside one asymmetric layout. Unlike a uniform feature grid, the layout itself is the argument.

مكونات ذات صلة

List

A list turns records into a working queue — one row per order, message, or task, each carrying its own metadata and its own state. Describe what a row contains and what users do to it, and MeDo generates the feed, the selection model, drag reordering, and virtualization for ten thousand rows.

مكونات ذات صلة

Masonry

Media refuses to share one aspect ratio, and masonry is the layout that stops pretending otherwise — portfolios, pinboards, and galleries packed into balanced columns with nothing cropped. Describe your media and MeDo generates the column engine, the breakpoints, and the load-time placeholders that keep it still.

مكونات ذات صلة

شبكة الميزات

صِف مزايا منتجك بالعربية البسيطة وسيولّد MeDo شبكة ميزات أنيقة ومتجاوبة في ثوانٍ. بدّل الأيقونات، واضبط الأعمدة، وحسّن النصوص — كل ذلك دون لمس سطر برمجي واحد.

مكونات ذات صلة