justified-layout - Pass in box sizes and get back sizes and coordinates for a justified layout

  •        5

Pass in box sizes and get back sizes and coordinates for a nice justified layout like that seen all over Flickr. The explore page is a great example. Here's another example using the fullWidthBreakoutRowCadence option on Flickr's album page. Open Source Licensed under the MIT license.

https://flickr.github.io/justified-layout/
https://github.com/flickr/justified-layout

Dependencies:

merge : 1.2.0

Tags
Implementation
License
Platform

   




Related Projects

Justified-Gallery - JQuery plugin that allows you to create a gallery with a justified grid

  •    HTML

This is a JQuery plugin which allows you to create responsive, infinite, and high quality justified gallery of images.A common problem, for people who create sites, is to create an elegant image gallery that manages the various sizes and aspect ratio of images. Flickr and Google+ manage this situation in an excellent way, the purpose of this plugin is to give you the power of these solutions, with a new fast algorithm.

greedo-layout-for-android - Full aspect ratio grid LayoutManager for Android's RecyclerView

  •    Java

A drop-in custom layout manager for Android RecyclerViews to layout a grid of photos while respecting their aspect ratios. See the sample project for a complete solution on how to use GreedoLayout. Below are the specific steps.

FullscreenLayoutPageTransitions - This responsive layout is based on an initial grid of four boxes

  •    Javascript

This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. In the work section we experiment with another transition which is to show a panel by making it appear from the bottom while scaling the current one down. To see it in action, open the work section and click on one of the portfolio items and navigate through them.

vue-grid-layout - A draggable and resizable grid layout, for Vue.js.

  •    Vue

This is the initial layout of the grid. The value must be an Array of Object items. Each item must have i, x, y, w and h proprties. Please refer to GridItem documentation below for more informations.

react-grid-layout - A draggable and resizable grid layout with responsive breakpoints, for React.

  •    Javascript

React-Grid-Layout is a grid layout system much like Packery or Gridster, for React. Unlike those systems, it is responsive and supports breakpoints. Breakpoint layouts can be provided by the user or autogenerated.


react-stack-grid - Pinterest like layout components for React.js

  •    Javascript

Pinterest like layout components for React.js. You can install the react-stack-grid from npm.

avalanche - Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system

  •    CSS

Example of a two column, responsive, centered grid. All grid layout classes and responsive width classes are modifiers. $av-namespace Global prefix for layout and cell class names. Default: grid.

Singularity - Grids without limits

  •    CSS

Singularity is a next generation grid framework built from the ground up to be responsive. What makes Singularity different? Well, a lot of things. Singularity is based on internal ratios instead of context based which allows for better gutter consistency across breakpoints. Ratio based math also allows for non-uniform grids in any unit you want to use. Layout on the web has changed significantly since Scott's first push back on March 7, 2012. First came Flexbox, then CSS Grid. CSS Grid provides layout functionality that covers all of Singularity's usecases and then quite a few more that we were never really able to support.

greedo-layout-for-ios - Full aspect ratio grid layout for iOS

  •    Objective-C

A library that computes what size the UICollectionView cells should be to display images in a variable height fixed aspect ratio grid. GreedoLayout is released under the MIT license. See LICENSE for details.

microframe - :microscope: :triangular_ruler: :pencil2: Microframe is a micro (<200px wide), grid based wireframe PSD template for UI and UX designers mocking up website and app layouts

  •    

The PSD uses guides to create a 12 column grid which you can use to align your elements all pertty like. There is a 12 column layout (for standard laptop/desktop views), a 6 column layout (for tablet views), and a 4 column layout (for mobile views). Each layout is grouped into a Photoshop group.

LayoutSwitch - A sample showing an easy way to make switch animation from list layout to grid layout with RecyclerView

  •    Java

This is a sample showing an easy way to make switch animation from list layout to grid layout with RecyclerView.

minigrid - 📏 Minimal 2kb zero dependency cascading grid layout

  •    Javascript

Minigrid is a minimal 2kb zero dependency cascading grid layout. Website & Documentation: http://alves.im/minigrid.

TomatoCMS - Impressive and Powerful CMS

  •    PHP

TomatoCMS, an impressive open source Content Management System (CMS) powered by Zend Framework, jQuery and 960grid. TomatoCMS considers each web page made up of many different elements called widgets. You can easily create, customize the layout of your site like never before through a visual tool called Layout Editor. TomatoCMS has a lot of built-in widgets, and developers can easily create new widgets.

gridbugs - A curated list of Grid interop issues

  •    

Inspired by Flexbugs this list aims to be a community curated list of CSS Grid Layout bugs, incomplete implementations and interop issues. Grid shipped into browsers in a highly interoperable state, however there are a few issues - let's document any we find here. While I'd like to focus on issues relating to the Grid Specification here, it is likely that related specs such as Box Alignment will need to be referenced. If you think you have spotted an issue and it seems to relate to Grid, post it. We can work out the details together and make sure browser or spec issues get logged in the right place.

autoresponsive-react - Auto Responsive Layout Library For React

  •    Javascript

Auto responsive grid layout library for React.See our CONTRIBUTING.md for information on how to contribute.

react-native-masonry - :raised_hands: A pure JS react-native component to render a masonry~ish layout for images with support for dynamic columns, progressive image loading, device rotation, on-press handlers, and headers/captions

  •    Javascript

"Bricks" are the basic building block of the masonry and are passed into the props.bricks. They essentially represent the items within each column and require a uri property at a minimum. However, you can freely add additional properties to the data property if you need access to certain data within your brick.onPress handler and footer/header renderer. The following properties are available.

react-native-photo-browser - Local and remote media gallery with captions, selections and grid view support for react native

  •    Javascript

A full screen image gallery with captions, selections and grid view support for react-native. Layout and API design are inspired by great MWPhotoBrowser library. The component has both iOS and Android support.

react-absolute-grid - An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React

  •    Javascript

An absolute layout grid with animations, filtering, zooming, and drag and drop support. Use your own component as the grid item. See the Demo. The idea behind AbsoluteGrid is high performance. This is achieved by using Translate3d to position each item in the layout. Items are never removed from the DOM, instead they are hidden. For best performance you should avoid re-arranging or removing items which you pass into AbsoluteGrid, instead you can use the filtered and sort properties to hide or sort an item. Those properties are customizable using the keyProp and filterProp properties. In addition, all data passed must be immutable so that we don't waste any renders.

styled-css-grid - 🍱 A tiny CSS grid layout for React

  •    Javascript

A tiny (~2kb) CSS grid layout for React, built with styled-components 💅. See the website.