History: Grid
Source of version: 28 (current)
Copy to clipboard
{REMARKSBOX(type="note" title="Note")}First of all please note it is a bit confusing name for this page as the Grid term can be confused for Bootstrap Layout Grid system or other Grid systems.{REMARKSBOX}
-=About=-
Discussion about tools available and how to handle a "Dynamic Grid" Layout or a "Masonry" type layout display of content within Tiki: articles, blog posts, tracker items, etc.
Let's imagine that we would like to mimic Pinterest-like "cards" layout in Tiki or e.g. this type of display of objects:
http://hhottawa.sparkboard.com/
Like a visual display of elements with sorting in a table by rows first and columns later.
{maketoc title="" levels="2,3"}
!!# Bootstrap and Masonry
From version 5 Bootstrap allow the integration of an external Javascript to setup a masonry grid system and cards component.
See: https://getbootstrap.com/docs/5.3/examples/masonry/
# Add the script line in your Tiki, Look&Feel, Customization, Custom HTML head content field
# Add the data-masonry attribute to the .row wrapper of your grid.
## If used in a Smarty template, the attribute must be added inside a "literal" block
++ IE: -+{literal}data-masonry='{"percentPosition": true }'{/literal}+-
!!# Masonry
Code: https://github.com/desandro/masonry
Demo: http://masonry.desandro.com/
MIT licensed
{HTML()}<script type='text/javascript' src='https://www.openhub.net/p/desandros_masonry/widgets/project_factoids_stats?format=js'></script>{HTML}
Jonny wrote:
{CODE(colors="tiki")}
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
{CODE}
!!# CSS-only Masonry
This is very simple and achieved using CSS only properties column-count and column-gap and inline-blocks. Inspired by the [http://w3bits.com/css-masonry/|Creating a CSS-only Responsive Masonry] article.
Demo:
{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}
Code:
{CODE(colors="tiki")}
{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}
{CODE}
!!!# Alternative Row Layout Using CSS Flex Display Property
Demo:
{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}
Code:
{CODE(colors=tiki)}
{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}
{CODE}
We can also easily randomize the order of items using JS and by adding -+randomize+- class to the -+flexmasonry+- div:
{CODE()}{JQ()}$(".randomize > *").each(function() { var nr = Math.round(Math.random() * 100); $(this).css("order", nr); });{JQ}{CODE}
{JQ()}$(".randomize > *").each(function() { var nr = Math.round(Math.random() * 100); $(this).css("order", nr); });{JQ}
Result:
{DIV(class="flexmasonry randomize")}
{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}
!!!# Alternative Column Layout Using CSS Flex Display Property
To achieve simmilar result as with columns property we need to limit the height of the flex container.
Demo:
{HTML()}<style>.flexmasonry.vertical {display: flex; flex-flow: column wrap; max-height: 600px} .flexmasonry.vertical > * {border: solid 1px #ccc; border-radius: .5rem; flex-grow: 1; margin: 1rem; width: 30%; padding: 1rem} .flexmasonry.vertical > * * {max-width: 100%}</style>{HTML}
{DIV(class="flexmasonry vertical")}
{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}
!!!# Other masonry related
See:
https://www.openhub.net/p?query=masonry%20layout
!!# Gridstack.js
Drag and drop support!
Code: https://github.com/troolee/gridstack.js
Sample: https://troolee.github.io/gridstack.js/
MIT licensed
{HTML()}<script type='text/javascript' src='https://www.openhub.net/p/gridstackjs/widgets/project_factoids_stats?format=js'></script>{HTML}
!!#Shapeshift
Looks very capable but sadly latest commit is 2 years ago :-/
Code: https://github.com/McPants/jquery.shapeshift
Demo: http://mcpants.github.io/jquery.shapeshift/
MIT licensed
{HTML()}<script type='text/javascript' src='https://www.openhub.net/p/jquery_shapeshift/widgets/project_factoids_stats?format=js'></script>{HTML}
!!# Gridlex
The nicest look and feel but row based (flex row?) layout.
Code: https://github.com/devlint/gridlex
Sample: http://gridlex.devlint.fr/cards.html
Openhub: https://www.openhub.net/p/gridlex/
MIT licensed
{HTML()}<script type='text/javascript' src='https://www.openhub.net/p/gridlex/widgets/project_factoids_stats?format=js'></script>{HTML}
!!# Chewing-grid
A So-So.
Code: https://github.com/tzi/chewing-grid.css
Sample: http://tzi.github.io/chewing-grid.css/
Openhub: https://www.openhub.net/p/chewing-grid_css/
{HTML()}<script type='text/javascript' src='https://www.openhub.net/p/chewing-grid_css/widgets/project_factoids_stats?format=js'></script>{HTML}
MIT licensed
!!# Minigrid
The minimalistic.
Code: https://github.com/henriquea/minigrid
Sample: http://jsbin.com/wamele/edit?js,output
MIT licensed
!!# Others
Perhaps at http://bootsnipp.com ?
!! Links, etc.
* [http://www.fusioncharts.com/blog/2014/09/comparing-jquery-grid-plugins-masonry-vs-isotope-vs-packery-vs-gridster-vs-shapeshift-vs-shuffle-js/] (Last updated on March 22, 2016.)
*{http://jqueryhouse.com/jquery-grid-plugins/} - 40 Best jQuery Grid Plugins
* [http://w3bits.com/css-masonry/] - Creating a CSS-only Responsive Masonry (<-- This is cool.)
** Main disadvantage is it allows only order of items by column {sign user="luci" datetime="2016-09-07T12:52:56+00:00"}
(alias(Dynamic Grid)) | (alias(Grid Display)) | (alias(Masonry)) | (alias(Cards))