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.
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.
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}
1.2. Masonry
Code: https://github.com/desandro/masonry
Demo: http://masonry.desandro.com/
MIT licensed
Jonny wrote:
Copy to clipboard
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
1.3. CSS-only Masonry
This is very simple and achieved using CSS only properties column-count and column-gap and inline-blocks. Inspired by the Creating a CSS-only Responsive Masonry article.
Demo:
#1
Some text for the first "card"
#2 Text only item.
#3
#4 Here is an ordered list:
- list item 1
- list item 2
- list item 3
#5
#6 Something else... This is actually a span.
Code:
Copy to clipboard
{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}
1.3.1. Alternative Row Layout Using CSS Flex Display Property
Demo:
#1
Some text for the first "card"
#2 Text only item.
#3 This item has centered image:
#4 Here is an ordered list:
- list item 1
- list item 2
- list item 3
#5
#6 Something else... This is actually a span
in a p
.
#7
Code:
Copy to clipboard
{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}
We can also easily randomize the order of items using JS and by adding randomize
class to the flexmasonry
div:
Copy to clipboard
{JQ()}$(".randomize > *").each(function() { var nr = Math.round(Math.random() * 100); $(this).css("order", nr); });{JQ}
Result:
#1
Some text for the first "card"
#2 Text only item.
#3 This item has centered image:
#4 Here is an ordered list:
- list item 1
- list item 2
- list item 3
#5
#6 Something else... This is actually a span
in a p
.
#7
1.3.2. 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:
#1
Some text for the first "card"
#2 Text only item.
#3 This item has centered image:
#4 Here is an ordered list:
- list item 1
- list item 2
- list item 3
#5
#6 Something else... This is actually a span
in a p
.
#7
1.3.3. Other masonry related
See:
https://www.openhub.net/p?query=masonry%20layout
1.4. Gridstack.js
Drag and drop support!
Code: https://github.com/troolee/gridstack.js
Sample: https://troolee.github.io/gridstack.js/
MIT licensed
1.5. 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
1.6. 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
1.7. 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/
MIT licensed
1.8. Minigrid
The minimalistic.
Code: https://github.com/henriquea/minigrid
Sample: http://jsbin.com/wamele/edit?js,output
MIT licensed
1.9. Others
Perhaps at http://bootsnipp.com ?
Links, etc.
Dynamic Grid | Grid Display | Masonry | Cards
{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))