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.