Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gilbitron/flexmasonry
A lightweight masonry (cascading grid layout) library powered by flexbox.
https://github.com/gilbitron/flexmasonry
Last synced: 30 days ago
JSON representation
A lightweight masonry (cascading grid layout) library powered by flexbox.
- Host: GitHub
- URL: https://github.com/gilbitron/flexmasonry
- Owner: gilbitron
- License: mit
- Created: 2019-04-18T19:34:48.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-03-15T23:10:21.000Z (8 months ago)
- Last Synced: 2024-07-31T18:20:49.471Z (3 months ago)
- Language: HTML
- Homepage: https://flexmasonry.now.sh
- Size: 48.8 KB
- Stars: 420
- Watchers: 13
- Forks: 24
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/flexmasonry)
# FlexMasonry
FlexMasonry is a lightweight, zero-dependency, masonry (cascading grid layout) library powered by CSS flexbox. The library itself is inspired by [this article by Tobias Ahlin](https://tobiasahlin.com/blog/masonry-with-css/) on using `flex`, `:nth-child()`, and `order` to create a pure CSS masonry layout (as opposed to the hugely popular [Masonry library by David DeSandro](https://masonry.desandro.com/) that is powered by Javascript). I've taken this concept and sprinkled in some Javascript to tie it all together and make it easy to use.
## Features
* **Lightweight** - Just 6KB of JS and CSS
* **Fast** - Uses CSS flexbox for layout
* **Responsive** - Show different number of columns at different breakpoints
* **Simple** - Just 3 options
[See a demo](https://flexmasonry.now.sh/)
## Install
* Download the [latest release](https://github.com/gilbitron/flexmasonry/releases).
* Clone this repo.
* Install using NPM/Yarn:
```
npm install flexmasonry
yarn add flexmasonry
```
Then, include the `flexmasonry.js` and `flexmasonry.css` files from the `dist` folder in your HTML. Or you can use the files directly from a CDN:
```html
```
## Usage
Set up your HTML. For example:
```html
```
Then hook up the script, passing in the selector target:
```js
FlexMasonry.init('.grid');
```
FlexMasonry will then convert all `.grid` elements to masonry grids with multiple columns.
## Options
The second, optional, parameter of the `init` method is an object containing options. The default options are as follows:
```js
{
/*
* If `responsive` is `true`, `breakpointCols` will be used to determine
* how many columns a grid should have at a given responsive breakpoint.
*/
responsive: true,
/*
* A list of how many columns should be shown at different responsive
* breakpoints, defined by media queries.
*/
breakpointCols: {
'min-width: 1500px': 6,
'min-width: 1200px': 5,
'min-width: 992px': 4,
'min-width: 768px': 3,
'min-width: 576px': 2,
},
/*
* If `responsive` is `false`, this number of columns will always be shown,
* no matter the width of the screen.
*/
numCols: 4,
}
```
For example, to always shown 6 columns in your grid:
```js
FlexMasonry.init('.grid', {
responsive: false,
numCols: 6
});
```
## Methods
The `FlexMasonry` variable has several methods:
**`init(targets, options = {})`**
Initialises the FlexMasonry library and sets up the `targets` as masonry grids.
* `targets` can be a string, an array of elements or a `NodeList`.
* `options` [see above](#options).
**`refresh(target, options = {})`**
Refreshes the `target` grid layout.
* `target` must be an `Element`.
* `options` [see above](#options).
**`refreshAll(options = {})`**
Refreshes the grid layouts of all `targets` passed to `init()`.
* `options` [see above](#options).
**`destroyAll()`**
Removes the event listeners for all `targets` passed to `init()`.
## Development
Run `yarn` to install the dependencies and use `demo/index.html` to test things. To watch/build the library:
```
yarn watch
yarn build
```
## FAQ
> Why not just use pure CSS?
A good question! You _can_ use pure CSS to achieve the same outcome. However, there are several aspects of this setup that require a bit of "dynamic" updating to make it flexible and easy to use (hence the use of Javascript). The main one being that the masonry container requires a fixed height (which FlexMasonry calculates on the fly). Also the masonry container needs a certain number of "break" elements to work properly depending on the number of columns. To enable this, and to support having a different number of columns at different responsive breakpoints, we need Javascript.
## Show your Support
To show your support for my work on this project:
* [Star this repository](https://github.com/gilbitron/flexmasonry/stargazers)
* [Tell others about this project](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fgilbitron%2Fflexmasonry)
* [Sponsor me on GitHub](https://github.com/users/gilbitron/sponsorship)
## Credits
FlexMasonry was created by [Gilbert Pellegrom](https://gilbitron.me) from [Dev7studios](https://dev7studios.co). Released under the MIT license.