Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

You can want to give gap between of the columns/row anymore #10

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

You can want to give gap between of the columns/row anymore #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 33 additions & 25 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,18 @@ FlexMasonry is a lightweight, zero-dependency, masonry (cascading grid layout) l

## 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
- **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:
- Download the [latest release](https://github.com/gilbitron/flexmasonry/releases).
- Clone this repo.
- Install using NPM/Yarn:

```
npm install flexmasonry
Expand All @@ -29,7 +29,10 @@ 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
<link rel="stylesheet" href="https://unpkg.com/flexmasonry/dist/flexmasonry.css">
<link
rel="stylesheet"
href="https://unpkg.com/flexmasonry/dist/flexmasonry.css"
/>
<script src="https://unpkg.com/flexmasonry/dist/flexmasonry.js"></script>
```

Expand All @@ -39,18 +42,18 @@ Set up your HTML. For example:

```html
<div class="grid">
<div><img src="https://source.unsplash.com/t3DHojIo-08" alt=""></div>
<div><img src="https://source.unsplash.com/Imc-IoZDMXc" alt=""></div>
<div><img src="https://source.unsplash.com/SOZWHqeXcPQ" alt=""></div>
<div><img src="https://source.unsplash.com/bkdzvgBB7rQ" alt=""></div>
<div><img src="https://source.unsplash.com/Aruugw_rJCM" alt=""></div>
<div><img src="https://source.unsplash.com/t3DHojIo-08" alt="" /></div>
<div><img src="https://source.unsplash.com/Imc-IoZDMXc" alt="" /></div>
<div><img src="https://source.unsplash.com/SOZWHqeXcPQ" alt="" /></div>
<div><img src="https://source.unsplash.com/bkdzvgBB7rQ" alt="" /></div>
<div><img src="https://source.unsplash.com/Aruugw_rJCM" alt="" /></div>
</div>
```

Then hook up the script, passing in the selector target:

```js
FlexMasonry.init('.grid');
FlexMasonry.init(".grid");
```

FlexMasonry will then convert all `.grid` elements to masonry grids with multiple columns.
Expand Down Expand Up @@ -82,15 +85,20 @@ The second, optional, parameter of the `init` method is an object containing opt
* no matter the width of the screen.
*/
numCols: 4,
/*
* If you want to give gap between of the columns/row
*/
gap: 0,
}
```

For example, to always shown 6 columns in your grid:

```js
FlexMasonry.init('.grid', {
responsive: false,
numCols: 6
FlexMasonry.init(".grid", {
responsive: false,
numCols: 6,
gap: 2,
});
```

Expand All @@ -102,21 +110,21 @@ The `FlexMasonry` variable has several methods:

Initialises the FlexMasonry library and sets up the `targets` as masonry grids.

* `targets` can be a string, an array of elements or a `Node​List`.
* `options` [see above](#options).
- `targets` can be a string, an array of elements or a `Node​List`.
- `options` [see above](#options).

**`refresh(target, options = {})`**

Refreshes the `target` grid layout.

* `target` must be an `Element`.
* `options` [see above](#options).
- `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).
- `options` [see above](#options).

**`destroyAll()`**

Expand All @@ -141,9 +149,9 @@ A good question! You _can_ use pure CSS to achieve the same outcome. However, th

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)
- [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

Expand Down
216 changes: 169 additions & 47 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,72 +1,194 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FlexMasonry</title>

<style type="text/css">
body {
body {
padding: 0;
margin: 0;
}
img {
}
img {
display: block;
max-width: 100%;
height: auto;
}
.demo {
}
.demo {
max-width: 1600px;
min-height: 500px;
margin: 20px auto;
padding: 0 20px;
overflow-x: hidden;
}
.inner {
}
.inner {
padding: 2px;
}
}
</style>
<link rel="stylesheet" href="../dist/flexmasonry.css">
</head>
<body>
<link rel="stylesheet" href="../dist/flexmasonry.css" />
</head>
<body>
<div class="demo">
<div class="grid">
<div><div class="inner"><img src="https://source.unsplash.com/t3DHojIo-08" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/Imc-IoZDMXc" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/SOZWHqeXcPQ" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/bkdzvgBB7rQ" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/Aruugw_rJCM" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/E2ZuBbBtrVk" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/IMApG5GuhKw" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/xvwZJNaiRNo" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/Wkf2R-GK-pc" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/NbGiwlx8pgE" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/t3DHojIo-08" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/Imc-IoZDMXc" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/SOZWHqeXcPQ" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/bkdzvgBB7rQ" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/Aruugw_rJCM" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/E2ZuBbBtrVk" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/IMApG5GuhKw" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/xvwZJNaiRNo" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/Wkf2R-GK-pc" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/NbGiwlx8pgE" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/t3DHojIo-08" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/Imc-IoZDMXc" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/SOZWHqeXcPQ" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/bkdzvgBB7rQ" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/Aruugw_rJCM" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/E2ZuBbBtrVk" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/IMApG5GuhKw" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/xvwZJNaiRNo" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/Wkf2R-GK-pc" alt=""></div></div>
<div><div class="inner"><img src="https://source.unsplash.com/NbGiwlx8pgE" alt=""></div></div>
<div class="grid">
<div>
<div class="inner">
<img src="https://source.unsplash.com/t3DHojIo-08" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/Imc-IoZDMXc" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/SOZWHqeXcPQ" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/bkdzvgBB7rQ" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/Aruugw_rJCM" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/E2ZuBbBtrVk" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/IMApG5GuhKw" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/xvwZJNaiRNo" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/Wkf2R-GK-pc" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/NbGiwlx8pgE" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/t3DHojIo-08" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/Imc-IoZDMXc" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/SOZWHqeXcPQ" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/bkdzvgBB7rQ" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/Aruugw_rJCM" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/E2ZuBbBtrVk" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/IMApG5GuhKw" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/xvwZJNaiRNo" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/Wkf2R-GK-pc" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/NbGiwlx8pgE" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/t3DHojIo-08" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/Imc-IoZDMXc" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/SOZWHqeXcPQ" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/bkdzvgBB7rQ" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/Aruugw_rJCM" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/E2ZuBbBtrVk" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/IMApG5GuhKw" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/xvwZJNaiRNo" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/Wkf2R-GK-pc" alt="" />
</div>
</div>
<div>
<div class="inner">
<img src="https://source.unsplash.com/NbGiwlx8pgE" alt="" />
</div>
</div>
</div>
</div>

<script src="../dist/flexmasonry.js"></script>
<script>
FlexMasonry.init('.grid');
FlexMasonry.init(".grid", {
gap: 1,
});
</script>
</body>
</body>
</html>
9 changes: 1 addition & 8 deletions dist/flexmasonry.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,7 @@
align-content: space-between;
}

.flexmasonry-item { width: 100%; }
.flexmasonry-cols-2 .flexmasonry-item { width: 50%; }
.flexmasonry-cols-3 .flexmasonry-item { width: 33.333%; }
.flexmasonry-cols-4 .flexmasonry-item { width: 25%; }
.flexmasonry-cols-5 .flexmasonry-item { width: 20%; }
.flexmasonry-cols-6 .flexmasonry-item { width: 16.666%; }
.flexmasonry-cols-7 .flexmasonry-item { width: 14.285%; }
.flexmasonry-cols-8 .flexmasonry-item { width: 12.5%; }
.flexmasonry-item { width: 100%; box-sizing: border-box; }

.flexmasonry-cols-2 .flexmasonry-item:nth-child(2n+1) { order: 1; }
.flexmasonry-cols-2 .flexmasonry-item:nth-child(2n) { order: 2; }
Expand Down
Loading