Loading...
 
Skip to main content

History: Grid Display

Source of version: 15 (current)

Copy to clipboard
            ! {{page}}
Example of CSS-only Masonry (Grid Display), introduced in ((Tiki16|Tiki 16.0))

This code:
{CODE(colors="tiki")}
{DIV(class=masonry)}
{LIST()}
{filter field=tracker_id content=7}
{filter field=tracker_field_f_125 content="NOT "}
{OUTPUT()}{DIV(class="panel panel-default")}{DIV(class=panel-heading)}{display name=tracker_field_f_125 format=trackerrender}{display name=tracker_field_f_104  format=trackerrender}{DIV}{DIV(class=panel-body)}{display name=tracker_field_f_70 default=""}
{DIV}{DIV}{OUTPUT}
{LIST}
{DIV}
{CODE}

Would produce:

{img src="display1317" link="display1317" width="800" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}

A nice example: https://tiki.org/TikiFest2018-Montreal-Ephemera

Note: It is also possible to use Bootstrap5 partial integration of Masonry, more examples and ideas can be found [https://dev.tiki.org/Grid|here].

Alias names of this page:
(alias(Grid)) | (alias(Masonry)) | (alias(GridDisplay)) | (alias(CSSMasonry)) | (alias(Cards))