Grid

I've been using Masonry (e.g. on http://londonfieldworks.com/Projects and http://jfw-photography.com) and it seems to work ok. Was wondering about including it in Tiki but it's ever so easy to add:

    Add this to "Custom code just before the closing </body> tag"

        <script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>


    Wrap your list plugin in a div.grid in the wiki page like this:

        {DIV(class="grid")}
        {LIST()}
          {pagination max="100"}
          {filter field="tracker_id" content="1"}
          {OUTPUT()}{DIV(class="tile")}{display name="image"}{DIV(class="info")}{DIV(class="h3")}[Project-{display name="object_id"}-{display name="title"}|{display name="title"}]{DIV}{display name="tracker_field_description"}{DIV}{DIV}{OUTPUT}
          {FORMAT(name="image")}{display name="wikiplugin_img" format="wikiplugin" fileId="tracker_field_mainImage" thumb="y" responsive="n" width="250" default="fileId=1" link=""}{FORMAT}
        {LIST}
        {DIV}


    Then add this to a javascript document ready (in custom.js of a {JQ} plugin)

        $grid = $('.grid').masonry({
        	itemSelector: 'div.tile',
        	columnWidth: 350,
        	fitWidth: true
        });


    and finally add your CSS, something like this:

        .grid {
        	margin: 0 auto;
        }

        .tile {
        	cursor: pointer;
        	margin: 0 50px 20px;
        }

        .tile .info {
        	width: 250px;
        	padding: 0 18px 20px 0;
        	font-size: 16px;
        	line-height: 1;
        }

        ...etc


HTH :)

jonny

{HTML()}<style>.masonry {-moz-column-count: 3; -moz-column-gap: 1.5rem; column-count: 3; column-gap: 1.5rem} .masonry > * {border: solid 1px #ccc; border-radius: .5rem; display: inline-block; margin-bottom: 1rem; padding: 1rem; width: 100%} .masonry * {max-width: 100%}</style>{HTML}
{DIV(class=masonry)}
	{DIV()}#1 {img src=display12?x=240}%%%Some text for the first "card"{DIV}
	{DIV()}#2 Text only item.{DIV}
	{DIV()}#3 {img src=display13?x=240}{DIV}
	{DIV()}#4 Here is an ordered list:
# list item 1
# list item 2
# list item 3	
	{DIV}
	{DIV()}#5 {img src=display14?x=240}{DIV}
	{DIV(type=span)}#6 Something else... This is actually a span.{DIV}
{DIV}

{HTML()}<style>.flexmasonry {display: flex; flex-wrap: wrap} .flexmasonry > * {border: solid 1px #ccc; border-radius: .5rem; flex-grow: 1; margin: 1rem; min-width: 25%; padding: 1rem} .flexmasonry * {max-width: 100%}</style>{HTML}
{DIV(class="flexmasonry")}
	{DIV()}#1 {img src=display12?x=240}%%%Some text for the first "card"{DIV}
	{DIV()}#2 Text only item.{DIV}
	{DIV()}#3 This item has centered image: {img imalign=center src=display13?x=240}{DIV}
	{DIV()}#4 Here is an ordered list:
# list item 1
# list item 2
# list item 3	
	{DIV}
	{DIV()}#5 {img src=display14?x=240}{DIV}
	{DIV(type=span)}#6 Something else... This is actually a -+span+- in a -+p+-.{DIV}
	{DIV()}#7 {img src=display15}{DIV}
{DIV}

{JQ()}$(".randomize > *").each(function() { var nr = Math.round(Math.random() * 100); $(this).css("order", nr); });{JQ}