Dynamic Grid Layout Generator – Magic Grid

Magic Grid sẽ giupd bạn tạo bố cục lưới động rất dễ dàng. Với Magic Grid, tất cả những gì bạn phải làm là chỉ định một vùng chứa và theo dõi các thay đổi. Một vài tùy chọn cấu hình khác có sẵn để thuận tiện nhưng tất cả đều rất đơn giản.

How to use it:

Install & download.

# NPM
$ npm install magic-grid --save

Load the minified version of the Magic Grid library in the html document.

<script src="/dist/magic-grid.umd.js"></script>

Create a container to place the grid layout.

<div class="container">
  
</div>

Create a dynamic grid layout and specify the number of grid items to generate.

let magicGrid = new MagicGrid({
    container: "#container",
    items: 20
});

magicGrid.listen();

Create a static grid layout from existing grid items.

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
</div>
let magicGrid = new MagicGrid({
    static: true
});

magicGrid.listen();

Set the space between grid items. Default: 25px.

let magicGrid = new MagicGrid({
    gutter: 30
})

Set the maximum number of grid items.

let magicGrid = new MagicGrid({
    maxColumns: 100
})

Decide whether to append next element to the shortest column.

let magicGrid = new MagicGrid({
    useMin: false
})

Enable/disable the animation when changing screen size.

let magicGrid = new MagicGrid({
    animate: false
})

Trigger a repositioning function after new grid items added to the grid layout.

magicGrid.positionItems();
Homepage Nguồn bài viết cssscript

Leave a Reply

Your email address will not be published. Required fields are marked *