Rate these docs

Vue Bootstrap Masonry

Vue Masonry - Bootstrap 4 & Material Design

Vue Bootstrap masonry is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed height rows. Basically, Masonry layout optimizes the use of space inside the web page by reducing any unnecessary gaps. Without this type of layout, certain restrictions are required to maintain the structure of layout.


Basic layout

Display of half page intro.


        <template>
          <mdb-masonry :numCols="3" :maxHeight="1000">
            <mdb-masonry-item :order="0" :itemStyle="{'height': '163px'}">1</mdb-masonry-item>
            <mdb-masonry-item :order="1" :itemStyle="{'height': '495px'}">2</mdb-masonry-item>
            <mdb-masonry-item :order="2" :itemStyle="{'height': '120px'}">3</mdb-masonry-item>
            <mdb-masonry-item :order="0" :itemStyle="{'height': '309px'}">4</mdb-masonry-item>
            <mdb-masonry-item :order="1" :itemStyle="{'height': '317px'}">5</mdb-masonry-item>
            <mdb-masonry-item :order="2" :itemStyle="{'height': '277px'}">6</mdb-masonry-item>
            <mdb-masonry-item :order="0" :itemStyle="{'height': '339px'}">7</mdb-masonry-item>
            <mdb-masonry-item :order="1" :itemStyle="{'height': '491px'}">8</mdb-masonry-item>
            <mdb-masonry-item :order="2" :itemStyle="{'height': '281px'}">9</mdb-masonry-item>
            <mdb-masonry-item :order="0" :itemStyle="{'height': '499px'}">10</mdb-masonry-item>
            <mdb-masonry-item :order="1" :itemStyle="{'height': '490px'}">11</mdb-masonry-item>
            <mdb-masonry-item :order="2" :itemStyle="{'height': '289px'}">12</mdb-masonry-item>
            <mdb-masonry-item :order="0" :itemStyle="{'height': '356px'}">13</mdb-masonry-item>
            <mdb-masonry-item :order="1" :itemStyle="{'height': '406px'}">14</mdb-masonry-item>
            <mdb-masonry-item :order="2" :itemStyle="{'height': '196px'}">15</mdb-masonry-item>
          </mdb-masonry>
        </template>

      


        <script>
          import { mdbMasonry, mdbMasonryItem } from 'mdbvue';
          export default {
            name: 'MansonryPage',
            components: {
              mdbMasonry,
              mdbMasonryItem
            }
          };
        </script>

      


        <style scoped>
          .masonry-with-columns div {
            display: flex;
            justify-content: center;
            align-items: center;
            background: #00997B;
            color: white;
            margin: 0.5rem;
            font-weight: 900;
            font-size: 2rem; 
          } 
        </style>

      

Horizontal option

Display of half page intro.


        <template>
          <mdb-masonry horizontal>
            <mdb-masonry-item :itemStyle="{'width': '222px'}">1</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'width': '102px'}">2</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'width': '155px'}">3</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'width': '365px'}">4</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'width': '132px'}">5</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'width': '106px'}">6</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'width': '199px'}">7</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'width': '164px'}">8</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'width': '424px'}">9</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'width': '467px'}">10</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'width': '350px'}">11</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'width': '296px'}">12</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'width': '440px'}">13</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'width': '110px'}">14</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'width': '413px'}">15</mdb-masonry-item>
          </mdb-masonry>
        </template>

      


        <script>
          import { mdbMasonry, mdbMasonryItem } from 'mdbvue';
          export default {
            name: 'MansonryPage',
            components: {
              mdbMasonry,
              mdbMasonryItem
            }
          };
        </script>

      


        <style scoped>
          .masonry-horizontal div {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 150px;
            background: #9B1B30;
            color: white;
            margin: 0.5rem;
            font-weight: 900;
            font-size: 2rem;
          }
        </style>

      

Flexbox option

Display of half page intro.


        <template>
          <mdb-masonry flexbox :maxHeight="1000">
            <mdb-masonry-item :itemStyle="{'height': '222px'}">1</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'height': '102px'}">2</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'height': '155px'}">3</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'height': '365px'}">4</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'height': '132px'}">5</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'height': '106px'}">6</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'height': '199px'}">7</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'height': '164px'}">8</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'height': '424px'}">9</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'height': '467px'}">10</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'height': '350px'}">11</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'height': '296px'}">12</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'height': '440px'}">13</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'height': '110px'}">14</mdb-masonry-item>
            <mdb-masonry-item :itemStyle="{'height': '413px'}">15</mdb-masonry-item>
          </mdb-masonry>
        </template>

      


        <script>
          import { mdbMasonry, mdbMasonryItem } from 'mdbvue';
          export default {
            name: 'MansonryPage',
            components: {
              mdbMasonry,
              mdbMasonryItem
            }
          };
        </script>

      


        <style scoped>
          .masonry-with-flex div {
            display: flex;
            justify-content: center;
            align-items: center;
            width: auto;
            background: #975A58;
            color: white;
            margin: 0.5rem;
            font-weight: 900;
            font-size: 2rem;
          }
        </style>

      

Note: We can help you build your project.
learn more

Vue Masonry - API

In this section you will find advanced information about the Masonry component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


        import { mdbMasonry, mdbMasonryItem } from 'mdbvue';
      

mdbMasonry Properties

Name Type Default Description Example
tag String 'div' Changes masonry wrapper tag <mdb-masonry tag="p">
horizontal Boolean false Changes layout mode to horizontal <mdb-masonry horizontal>
flexbox Boolean false Changes layout mode to flexbox <mdb-masonry flexbox>
maxHeight String/Number 'auto' Changes wrapper max-height property. If number given it returns value in pixels. <mdb-masonry :maxHeight="1000">
numCols Number Defines number of columns in basic layout. <mdb-masonry :numCols="3">

mdbMasonryItem Properties

Name Type Default Description Example
tag String 'div' Changes masonry-item's tag <mdb-masonry-item tag="p">
order String/Number '' Changes masonry item's order <mdb-masonry-item :order="2">
itemStyle Object Changes masonry item's styles <mdb-masonry-item :itemStyle="{'width': '413px'}">