Carregando…Carregando…Carregando…Carregando…Responsive masonry grid layout with configurable column counts per breakpoint.
$ npx kikitocn add masonry@/lib/utilsimport { Masonry } from "@/components/ui/cn/masonry/Masonry";
export function MasonryExample() {
return (
<Masonry>
Masonry
</Masonry>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
children* | ReactNode | — | Itens a distribuir nas colunas |
columns | number | { sm?: number; md?: number; lg?: number } | 3 | Número de colunas ou objeto com breakpoints |
gap | number | 16 | Espaço entre itens em px |
className | string | — | Classes extras pro container |
style | CSSProperties | — | Estilos inline pro container |
Masonry — CSS column-based grid with variable height items
columns responsivo: { sm: 1, md: 2, lg: 4 }