AI Masonry Generator.

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.

Built for Heights Nobody Chose

A masonry layout exists for one specific problem: media that carries its own proportions. A portrait photograph is tall because the subject is tall; a full-page screenshot is tall because the interface is long; no aspect ratio you impose on them is honest. A uniform grid answers by cropping or letterboxing — losing the subject or littering the page with whitespace. Masonry answers by accepting every natural height and balancing the columns instead: nothing is cropped, no cell is padded, and the ragged bottom edge is the honest report of what the collection contains. The price is reading order. A layout that packs by height cannot also read in a straight line, so masonry fits collections people browse — moodboards, portfolios, discovery feeds — and misfits any sequence whose order carries meaning. Its most common failure is not style but motion: without aspect-ratio placeholders, the page reflows with every image that arrives.

템플릿 4개

생성할 수 있는 Masonry 템플릿

모든 템플릿은 스크린샷이 아니라 실제 프롬프트입니다. 어떤 AI 에디터에든 붙여넣거나 MeDo에서 실행해 React + Tailwind 코드를 그대로 받으세요.

No JavaScriptCSS Columns

Pure CSS Column Masonry

The zero-dependency version. Its fill order is the tradeoff, and the code says so out loud.

Create a masonry using pure CSS multi-column layout: columns-1 on mobile, sm:columns-2, lg:columns-3, gap-4, each figure mb-4 with break-inside-avoid so no tile is ever sliced across two columns. Images use natural height with explicit width and height attributes, loading lazy. Add a code comment stating the honest tradeoff: CSS columns fill down column one before column two, so with a large collection the top of the page is all column one and the visual reading order runs vertically — fine for an even photo set, wrong where sequence matters.

MeDo에서 시도하기

Order keptBalanced JS

Shortest-Column JavaScript Masonry

Bucket items into columns by height so the bottom stays tidy and the DOM keeps your curated order.

Create a JavaScript-balanced masonry: distribute items into column arrays by shortest-column placement weighted with aspect ratio, render each column as a flex column, and recompute the buckets on resize with a ResizeObserver debounced at 150ms. DOM order stays identical to the source array, so screen readers and tab order follow the curated sequence even while visual placement balances heights. Show a 1-2-3-4 column progression across breakpoints with a 16px gutter and aspect-ratio placeholders that eliminate layout shift while images load.

MeDo에서 시도하기

MediaPortfolio Spread

Filterable Portfolio With Lightbox

The working portfolio: filters that re-bucket survivors, captions on a scrim, and column density as a user control.

Create a photographer portfolio masonry with a filter row above it — All, Portraits, Travel, Studio — where filtering animates tiles out with scale and opacity and re-buckets the survivors. Each tile shows the image plus a bottom gradient scrim carrying title and year that strengthens on hover. Offer a column-density control (2, 3, 4) in the corner. Clicking opens a lightbox with previous and next arrows and Escape to close. Source images carry known dimensions so placeholders reserve exact space and nothing shifts.

MeDo에서 시도하기

PredictableRow-Span Hybrid

Grid-Based Masonry Approximation

Masonry inside CSS Grid: shared horizontal rhythm, no library, near-source order on screen.

Create a masonry approximation inside CSS Grid: grid-auto-rows of 8px, each image tile computing its row span from its aspect ratio at render time (span = round(height / width * columnCount * 8) + 1), with grid-auto-flow: dense to backfill holes. This keeps a shared horizontal rhythm that pure masonry lacks, works without a masonry library, and preserves near-source order on screen. Include the span utility function and show it on 15 mixed-orientation images. Document in a comment that dense flow may swap visual order for pack tightness on irregular spans.

MeDo에서 시도하기

Masonry 커스터마이즈 방법

Say how the columns balance

Shortest-column placement, round-robin, and plain CSS column fill all produce different walls from the same items. Name the strategy so the preview matches production — and so you know which item lands at the top of column two before your users tell you.

Reserve heights before images arrive

Require width and height attributes or aspect-ratio boxes with placeholder fills. Without them, every image arrival reflows the page — the single most common masonry failure, and invisible in a fast demo where every image is cached.

Match the column engine to your order needs

Pure CSS columns fill down each column in sequence; JavaScript bucketing balances by height. Both keep DOM order equal to your source array — what changes is the visual sequence readers get. Curate the source array as the intended browsing order and accept the visual scatter as the cost of balance.

Cap the column count, not the width

On an ultrawide monitor an unconstrained masonry keeps adding columns until every tile is a stamp. Ask for a maximum column count with a centered container instead of letting tracks scale forever — three to five columns is where media stays readable.

Masonry 컴포넌트를 사용하는 사람

Photography portfolios

Portrait, landscape, and square work shown at natural proportions, nothing cropped to fit a template — the ragged column ends read as editorial honesty rather than mess.

Discovery feeds and moodboards

Pinterest-style walls where variable heights keep every pin's composition intact and the balance algorithm feeds the eye a full column at every scroll position.

Wedding, event, and interior studios

Mixed-orientation shoots from real venues presented without letterboxing, so the tall staircase shot stays tall and actually sells the space it photographed.

Blog and recipe card walls

Cards whose heights vary because their content varies — long titles, three-line summaries, tag rows — packed without forcing one invented card height on every story.

웹사이트 유형별 Masonry 패턴

같은 masonry 컴포넌트를 게시되는 사이트 유형에 맞춰 조정합니다.

01 / 04

Photography and Art Portfolios

The work is the aspect ratio — cropping it to fit a template misrepresents the product. Masonry with quiet gutters and honest captions lets the images set the rhythm.

Masonry 스타일과 변형

페이지의 나머지 부분과 어울리는 변형을 골라 바로 생성하세요.

01 / 04

Gapless Masonry

Tiles touch — no gutters at all. Reads as one composed poster wall with maximum image per pixel; demands strong images and disciplined color, because nothing mediates between them.

React, Next.js, Vue, Svelte에서의 Masonry

React, Next.js, Vue 3, SvelteKit, Astro 또는 순수 HTML — 같은 masonry을 여섯 가지 방식으로 넣을 수 있습니다.

01 / 03

React Shortest-Column Masonry

The whole layout is one bucket function: aspect ratio as weight, shortest column wins. No library, and the DOM keeps your source order while the columns balance the heights.

src/components/Masonry.tsx

type Tile = { id: string; src: string; width: number; height: number }

function bucketByShortest(tiles: Tile[], count: number): Tile[][] {
  const cols: Tile[][] = Array.from({ length: count }, () => [])
  const heights = new Array(count).fill(0)
  for (const tile of tiles) {
    const i = heights.indexOf(Math.min(...heights))
    cols[i].push(tile)
    heights[i] += tile.height / tile.width
  }
  return cols
}

<div className="flex gap-4">
  {bucketByShortest(tiles, 3).map((col, i) => (
    <div key={i} className="flex-1 space-y-4">
      {col.map((t) => (
        <img key={t.id} src={t.src} alt="" loading="lazy"
             width={t.width} height={t.height}
             className="w-full rounded-lg" />
      ))}
    </div>
  ))}
</div>

Masonry을 프로젝트에 추가하는 방법

masonry 템플릿을 고르고 프로덕션에 배포하기까지 네 단계.

01~1min

Confirm the Content Is Browsable, Not Sequential

Masonry spends reading order to buy balance. If your items form a ranked list, a tutorial, or any sequence with meaning, keep them in a grid or list — no packing algorithm fixes the wrong layout choice.

02~1min

Pick the Column Engine

CSS columns for zero JavaScript and small sets, JS bucketing for balanced bottoms and load-more, the grid row-span hybrid when you want shared rhythm without a library. Name it in the prompt — they produce different orders.

03~2min

Generate and Watch It Load

Open the preview on a throttled connection. Every jump or reflow is a missing placeholder — fix it by requiring dimensions per image, not by hiding images until they load.

04~2min

Audit the Order a Reader Gets

Resize from mobile to desktop and watch which items move columns. Then read the DOM order: that is what screen readers and keyboard users get. Reorder the source array until both stories are ones you intend.

Masonry에 대한 자주 묻는 질문

How do I decide between a grid and masonry for my media?

Ask whether one aspect ratio can represent every item honestly. Product photos, post covers, and video thumbnails can — a uniform grid keeps them aligned and predictable. Portraits, screenshots, and editorial photography cannot — cropping them to a shared ratio amputates the subject. Masonry trades aligned rows for intact proportions: columns stay regular, heights stay natural. If you find yourself choosing crop subjects per image to make a grid work, the content has already answered for you.

Why does my masonry show items in a different order than my array?

Because a packing layout cannot preserve both visual order and balanced heights. CSS multi-column fills down column one before column two, so the first third of a large set stacks vertically; shortest-column placement sends each item to whichever column is currently shortest. Both keep DOM order equal to your source array — screen readers follow the array, not the pixels — but the visual sequence belongs to the algorithm. Curate the source array as the reading order you mean, and treat the visual scatter as the price of balance.

Is masonry bad for accessibility?

It is manageable under one contract: DOM order equals the reading order you intend, because keyboard focus and screen readers traverse the DOM, not the columns. That breaks when the visual columns are sorted independently of the DOM — never do that. Beyond order, masonry inherits the standard image requirements: alt text, focusable controls with visible focus rings, captions that do not depend on hover alone. The layout is not the accessibility problem; visual-versus-DOM divergence caused by bypassing the DOM is.

Should I use CSS columns or a JavaScript masonry?

CSS columns win on simplicity: no dependencies, no measurement, and reflow on resize is free. Their costs are fill order down each column first, the need for break-inside: avoid so tiles are not sliced, and a ragged bottom edge. A JavaScript masonry balances by shortest column, keeps the bottom tidy, and handles load-more appends gracefully, at the price of measurement code and resize recalculation. Small, even sets: CSS columns. Large mixed sets with load-more: the JS layout earns its keep.

How do I stop the layout from jumping while images load?

Reserve every tile's space before its bytes arrive: width and height attributes on the img, or an aspect-ratio box computed from known dimensions, with a placeholder fill so the column plan is final before rendering. Layout shift from late images is the most common masonry complaint, and it is invisible in development where everything is cached — test on a throttled connection. MeDo generates the placeholders when the prompt requires known dimensions per image.

Is the Pinterest-style masonry layout dated?

The structure never left — discovery feeds across the web still pack variable-height media into balanced columns because the alternative is cropping. What dates a masonry is styling: hover gimmicks, endless animated tiles, decorative randomness. Generate the structure with current taste — quiet gutters, honest captions, fast placeholders — and it reads as considered rather than 2014. The real question stays fit: browsable media yes, sequential or ranked content no.

지금 masonry 생성하기.

모든 프롬프트를 시도하세요 — 무료, 가입 불필요.

무료로 빌드 시작 요금 보기

갤러리

원하는 그리드를 설명하면 MeDo가 몇 초 만에 완전히 스타일링된 이미지 갤러리를 생성합니다. 메이슨리 레이아웃, 라이트박스 오버레이, 호버 효과, 반응형 브레이크포인트 — 모두 하나의 프롬프트에서.

관련 컴포넌트

Grid

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.

관련 컴포넌트

Carousel

Describe what rotates — product shots, quotes, logos, video cards — and MeDo generates a carousel built around the part everyone else skips: a first slide that carries the message on its own, controls that are real buttons with honest disabled ends, swipe that never hijacks vertical scrolling, and autoplay that politely stays home unless you insist.

관련 컴포넌트

블로그 섹션

원하는 블로그 레이아웃 — 카드 스타일, 포스트 수, 추천 기사, 카테고리 필터 — 을 설명하면 MeDo가 완전한 컴포넌트를 생성합니다. 단 하나의 CSS grid 속성도 건드리지 않고 완성도 높은 블로그 섹션을 제공하세요.

관련 컴포넌트