https://github.com/skrylnikov/photo-flex-layout

Simple for use and beutiful layout for photo
https://github.com/skrylnikov/photo-flex-layout

flex flex-layout google google-photo grid justified justified-layout layout photo

Last synced: 5 months ago
JSON representation

Simple for use and beutiful layout for photo

• Host: GitHub
• URL: https://github.com/skrylnikov/photo-flex-layout
• Owner: skrylnikov
• License: mit
• Created: 2021-07-19T23:30:22.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2023-08-22T19:29:55.000Z (almost 3 years ago)
• Last Synced: 2025-09-24T19:54:10.012Z (9 months ago)
• Topics: flex, flex-layout, google, google-photo, grid, justified, justified-layout, layout, photo
• Language: TypeScript
• Homepage:
• Size: 667 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Photo Flex Layout

![Github license](https://badgen.net/github/license/skrylnikov/photo-flex-layout)

[![Npm version](https://badgen.net/npm/v/photo-flex-layout)](https://www.npmjs.com/package/photo-flex-layout)

![Npm types](https://badgen.net/npm/types/photo-flex-layout)

[![Bundlephobia size](https://badgen.net/bundlephobia/minzip/photo-flex-layout)](https://bundlephobia.com/package/photo-flex-layout)

Simple for use and beutiful layout for photo.

- **Small** 2 kbytes (minified and gzipped). Size Limit controls the size.

- **Beutiful** This is implementation [Google Photo Flex Layout](https://medium.com/google-design/google-photos-45b714dfbed1)

- **Framework agnostic**

- It has good **TypeScript** support.

## Install

```bash

npm add photo-flex-layout

```

## Usage

```typescript

import { photoFlexLayout } from 'photo-flex-layout';

const { containerHeight, boxes } = photoFlexLayout({

  targetRowHeight: 200,

  containerWidth: 500,

  boxSpacing: 0,

  items: [

    { width: 100, height: 200 },

    { width: 150, height: 100 },

    { width: 100, height: 100 },

    { width: 100, height: 100 },

    { width: 100, height: 100 },

    { width: 100, height: 100 },

  ],

});

containerHeight; //334

boxes; // [{width: 83.5, height: 167, top: 0, left: 0, ...}, {width: 250.5, height: 167, top: 10, left: 83.5, ...}, ...]

```

## Thanks

Inspired by [react-photo-gallery](https://github.com/neptunian/react-photo-gallery) by [Sandra Gonzales](https://github.com/neptunian).