[go: nahoru, domu]

Skip to content

najwer23/masonry-grid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Masonry Grid

IE11, Chrome, Firefox, Edge

Inside

  • Babel,
  • CSS,
  • JavaScript
  • FontAwesome 5
  • Font Muli
  • Webpack
    • MiniCssExtractPlugin
    • HtmlWebpackPlugin
    • File manager
  • HTML template

Usage

<div id="container">
    <div id="masonry" columns='{"400": 1, "800": 2, "1500": 3}' space='30'>
        <div id="masonry-child-0"></div>
        <div id="masonry-child-1"></div>
        <div id="masonry-child-2"></div>
    </div>
</div>

<div id="container">
    <div id="masonry2" columns='{"400": 1, "800": 2, "1500": 3}' space='30'>
        <div id="masonry2-child-0"></div>
        <div id="masonry2-child-1"></div>
        <div id="masonry2-child-2"></div>
    </div>
</div>

Remember to set your masonry on masonry-grid.js

let MASONRY_ARR_ID = [
    "masonry",
    "masonry2"
]
  • 400, 800, 1500 - custom breakpoints
  • 1, 2, 3 - number of columns for breakpoints
  • 30 - space between masonry-child

Installation

$ yarn install

Dev

$ yarn start

Production

$ yarn build

Deploy

$ yarn deploy

Author

Mariusz Najwer https://najwer23.github.io/

License

License: MIT