Grid

A grid of items
👁️
PREVIEW
A list of items to arrange in a grid. Wraps on smaller screen sizes. Compared to the cols component, use this when you have 3 or more individual items that are roughly the same proportions, for example for image galleries.
{% capture content %}
{% include figure.html ... %}
{% include figure.html ... %}
{% include figure.html ... %}
{% include figure.html ... %}
{% include figure.html ... %}
{% endcapture %}
{%
include grid.html
content=content
style="square"
%}
Parameter
Description
Default
content
Arbitrary content made up of separate items to arrange in a grid.
style
Visual style of the grid. Set to square to force the items to have a 1:1 aspect ratio. If using figure components, you probably want to set their widths to 100%.
Items auto-size
You can also pass plain Markdown images to this component. You may want to do this if you want to show images, such as a group of logos, without any of the styling that comes with the figure component (e.g. shadow).
{% capture content %}
![](/images/photo.png)
![](/images/photo.png)
![](/images/photo.png)
{% endcapture %}
{% include grid.html content=content %}
Note the empty lines in between the images. If you don't include these, Markdown will put all the images in a single paragraph <p> element, and that paragraph will be the only item in the grid. Separating them with newlines puts each image in its own paragraph, and thus grid item.
Last modified 11mo ago