Template:Gallery layout/doc

{{Gallery layout}} is a wrapper (or wrapper start tag) for blocks of arbitrary display: inline-block content (usually images generated by templates) to have them display in a style similar to <gallery>...</gallery> output: The blocks are auto-centered on one line, and wrap only as necessary to fit the window width, re-centering upon wrapping.

Demo: Test the sample content at the top of the Template:Gallery layout page by changing your browser window width to very narrow, medium, and very wide.

Usage

As a total wrapper, use |1= (a.k.a. |content=) to introduce the blocks of formatted content.

{{Gallery layout|1=
 [First block of content here]
 [Second block here]
 [Third block here]
 }}

As a wrapper-start tag, it is used with the {{Gallery layout end}} closing tag. Depending upon the content, the above method may not work; try this approach in such a case.

{{Gallery layout}}
 [First block of content here]
 [Second block here]
 [Third block here]
 {{Gallery layout end}}

Content blocks

The easy way to do a content block is to wrap each with {{Gallery layout content}}:

{{gallery layout content|1=
 Sample content: Lorem ipsum dolor sit amet,<br />consectetur adipiscing elit.
 }}

or, if this doesn't work due to complex content:

{{gallery layout content}}
 Sample content: Lorem ipsum dolor sit amet,<br />consectetur adipiscing elit.
 {{gallery layout content end}}

Manual CSS method: A content block can also be formed by adding specific CSS to an arbitrary HTML element that normally has a css display type of block (i.e., it will not work on an inline element like <span>). The element must simply have the following CSS: display: inline-block;. This can be done as a <div>...</div> wrapper (which is what {{gallery layout content}} is), added directly to an element such as a <blockquote>, or added as a template parameter to pass CSS to a meta-template, depending on the application.

The demo at the top of the Template:Gallery layout page can be manually reproduced with the following:

{{Gallery layout|1=
 <div style="display: inline-block;">
 ;Sample content: Lorem ipsum dolor sit amet,<br />consectetur adipiscing elit.
 </div>
 <div style="display: inline-block;">
 ;Sample content: Sed do eiusmod tempor incididunt<br />ut labore et dolore magna aliqua.
 </div>
 <div style="display: inline-block;">
 ;Sample content: Ut enim ad minim veniam,<br />quis nostrud exercitation ullamco laboris.
 </div>
 <div style="display: inline-block;">
 ;Sample content: Nisi ut aliquip ex ea<br />commodo consequat.
 </div>
 }}

Output:

Sample content

Lorem ipsum dolor sit amet,
consectetur adipiscing elit.

Sample content

Sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.

Sample content

Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris.

Sample content

Nisi ut aliquip ex ea
commodo consequat.

See also

• Help:Gallery tag, for images
• {{Gallery}}, an advanced version of the gallery tag (for images); its "See also" section lists additional image arrangement templates
• {{Cleanup gallery}}, to mark unencyclopedic galleries
• {{Div flex row}}, similar to this template but more alignment options