Note:Any Coral CSS classes and attributes not explicitly mentioned in the public documentation are private and subject to change. Their direct use is not recommended and at high risk of breaking after subsequent updates of CoralUI library. For technical details of how to use Coral safely, please refer to the CoralUI Architecture.
All items have the same fixed width. The remaining space is equally distributed between the container and items.
If the first row is not filled, then the items are left aligned.
Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum. Eos ne case mazim nominavi, ea est malorum sapientem.Ei noluisse expetenda qui. Mei in iusto convenire torquatos. At vix iusto corpora indoctum, nam choro apeirian eu.Et summo volumus sed, sea sale maiorum dignissim te.
<coral-masonrylayout="fixed-spread"spacing="20"columnwidth="80"><coral-masonry-item>Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.</coral-masonry-item><coral-masonry-item>His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum. Eos ne case mazim nominavi, ea est malorum sapientem.</coral-masonry-item><coral-masonry-item>Ei noluisse expetenda qui. Mei in iusto convenire torquatos. At vix iusto corpora indoctum, nam choro apeirian eu.</coral-masonry-item><coral-masonry-item>Et summo volumus sed, sea sale maiorum dignissim te.</coral-masonry-item></coral-masonry>
All items have the same fixed width. They are centered in the middle of the container with the defined spacing
between each other.
Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum. Eos ne case mazim nominavi, ea est malorum sapientem.Ei noluisse expetenda qui. Mei in iusto convenire torquatos. At vix iusto corpora indoctum, nam choro apeirian eu.Et summo volumus sed, sea sale maiorum dignissim te.
<coral-masonrylayout="fixed-centered"spacing="20"columnwidth="80"><coral-masonry-item>Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.</coral-masonry-item><coral-masonry-item>His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum. Eos ne case mazim nominavi, ea est malorum sapientem.</coral-masonry-item><coral-masonry-item>Ei noluisse expetenda qui. Mei in iusto convenire torquatos. At vix iusto corpora indoctum, nam choro apeirian eu.</coral-masonry-item><coral-masonry-item>Et summo volumus sed, sea sale maiorum dignissim te.</coral-masonry-item></coral-masonry>
The columnwidth defines the minimum width for the item. If there is remaining space, then it is
distributed equally between all items.
Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum. Eos ne case mazim nominavi, ea est malorum sapientem.Ei noluisse expetenda qui. Mei in iusto convenire torquatos. At vix iusto corpora indoctum, nam choro apeirian eu.Et summo volumus sed, sea sale maiorum dignissim te.
<coral-masonrylayout="variable"spacing="20"columnwidth="80"><coral-masonry-item>Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.</coral-masonry-item><coral-masonry-item>His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum. Eos ne case mazim nominavi, ea est malorum sapientem.</coral-masonry-item><coral-masonry-item>Ei noluisse expetenda qui. Mei in iusto convenire torquatos. At vix iusto corpora indoctum, nam choro apeirian eu.</coral-masonry-item><coral-masonry-item>Et summo volumus sed, sea sale maiorum dignissim te.</coral-masonry-item></coral-masonry>
Similar to the variable layout; however, remaining vertical space will be filled by expanding items.
Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum. Eos ne case mazim nominavi, ea est malorum sapientem.Ei noluisse expetenda qui. Mei in iusto convenire torquatos. At vix iusto corpora indoctum, nam choro apeirian eu.Et summo volumus sed, sea sale maiorum dignissim te.
<coral-masonrylayout="dashboard"spacing="20"columnwidth="80"><coral-masonry-item>Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.</coral-masonry-item><coral-masonry-item>His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum. Eos ne case mazim nominavi, ea est malorum sapientem.</coral-masonry-item><coral-masonry-item>Ei noluisse expetenda qui. Mei in iusto convenire torquatos. At vix iusto corpora indoctum, nam choro apeirian eu.</coral-masonry-item><coral-masonry-item>Et summo volumus sed, sea sale maiorum dignissim te.</coral-masonry-item></coral-masonry>
⠿
Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.
⠿
His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum.
⠿
Ei noluisse expetenda qui. Mei in iusto convenire torquatos.
<coral-masonrylayout="fixed-spread"spacing="20"columnwidth="100"orderable><coral-masonry-item><spancoral-masonry-draghandle>⠿</span>
Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.
</coral-masonry-item><coral-masonry-item><spancoral-masonry-draghandle>⠿</span>
His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum.
</coral-masonry-item><coral-masonry-item><spancoral-masonry-draghandle>⠿</span>
Ei noluisse expetenda qui. Mei in iusto convenire torquatos.
</coral-masonry-item></coral-masonry>
Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum.Ei noluisse expetenda qui. Mei in iusto convenire torquatos.Et summo volumus sed, sea sale maiorum dignissim te.
<coral-masonrylayout="fixed-spread"spacing="20"columnwidth="100"><coral-masonry-item>Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.</coral-masonry-item><coral-masonry-itemcolspan="2">His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum.</coral-masonry-item><coral-masonry-item>Ei noluisse expetenda qui. Mei in iusto convenire torquatos.</coral-masonry-item><coral-masonry-item>Et summo volumus sed, sea sale maiorum dignissim te.</coral-masonry-item></coral-masonry>
The following example shows how items can be filtered with JavaScript.
Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum.Ei noluisse expetenda qui. Mei in iusto convenire torquatos.
<inputclass="coral3-Textfield"id="filter"placeholder="Filter"><coral-masonryid="masonry_filter_example"layout="variable"spacing="20"columnwidth="100"><coral-masonry-item>Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.</coral-masonry-item><coral-masonry-item>His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum.</coral-masonry-item><coral-masonry-item>Ei noluisse expetenda qui. Mei in iusto convenire torquatos.</coral-masonry-item></coral-masonry>
The following example shows one possibility how selection can be implemented.
Click on items to select/unselect them:
Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum.Ei noluisse expetenda qui. Mei in iusto convenire torquatos.
<p>Click on items to select/unselect them:</p><coral-masonryid="masonry_selection_example"layout="variable"spacing="20"columnwidth="100"><coral-masonry-item>Lorem ipsum dolor sit amet, corpora postulant ocurreret in mel.</coral-masonry-item><coral-masonry-item>His illum augue causae ut, vim ne magna prodesset, est ad nemore quodsi alienum.</coral-masonry-item><coral-masonry-item>Ei noluisse expetenda qui. Mei in iusto convenire torquatos.</coral-masonry-item></coral-masonry>
The spacing between the items and the masonry container in pixel. If this property is not set, then it falls
back to the CSS padding of the masonry and margin of the items.
Non-destructively remove this element. It can be re-added by simply appending it to the document again.
It will be garbage collected if there are no more references to it.
Non-destructively remove this element. It can be re-added by simply appending it to the document again.
It will be garbage collected if there are no more references to it.