Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time
March 27, 2023 21:48
March 3, 2023 15:26
March 3, 2023 20:17
March 3, 2023 21:15
March 27, 2023 21:53
March 3, 2023 14:50

Plock Logo

React Plock is a tree-shakeable ultra small npm package (less than 1kB gzipped) that allows you to create amazing masonry layouts with an amazing developer experience. With React Plock, you can easily create responsive and customizable layouts that adapt to different screen sizes and devices.


  • Masonry Layout: Create beautiful masonry layouts with ease.
  • Responsive: Automatically adapts to different screen sizes and devices.
  • Customizable: Customize the layout to match your needs.
  • TypeScript Ready: Get the strength of type-safe languages.
  • Amazing DX: Easy to use and well-documented.


npm install react-plock


Using Plock with the new v3 APIs it's a piece of cake. Here's an example of how can you create an Unsplash-Like masonry grid. You can even see a demo of this example by clicking here.

import { Masonry } from 'react-plock';

const ImagesMasonry = () => {
  const items = [...imageUrls];

  return (
        columns: [1, 2, 3],
        gap: [24, 12, 6],
        media: [640, 768, 1024],
      render={(item, idx) => (
        <img key={idx} src={item} style={{ width: "100%", height: "auto" }} />

API Reference

Here's the TypeScript definition for the Masonry Component, below you can find a more detailed explanation.

export type MasonryProps<T> = React.ComponentPropsWithoutRef<"div"> & {
  items: T[];
  render: (item: T, idx: number) => React.ReactNode;
  config: {
    columns: number | number[];
    gap: number | number[];
    media?: number[];


This prop accepts a generic array of elements, each one will be passed to the render property.


The masonry render prop. Here's where you define the styles of every tile of the grid, the function takes the current looping item and the relative index.


A configuration object that is used to define the number of columns, media queries and gaps between items.

Other Props

As you can see, by using React.ComponentPropsWithoutRef<"div"> you can simply pass every available property to the div, some examples are id and className. The only one property that will be overwritten will be the style because is used internally for the masonry generation.

Important Note

Please, note that in case you are passing an array to the columns attribute of the config property, the number of elements MUST be equal to the number of media AND gap breakpoints provided!

// Correct: This will be responsive with 3 breakpoints.
    columns: [1, 2, 3],
    gap: [12, 16, 20],
    media: [640, 768, 1024],

// Correct: This will be responsive with 2 breakpoints.
    columns: [1, 2],
    gap: [2, 4],
    media: [640, 1024],

// Correct: This will be fixed with 4 columns in every screen size.
    columns: 4,
    gap: 8

// NOT Correct: This will cause trouble in rendering.
    columns: [4],
    media: [640, 768],