XenForo Article Forum Symmetrical Grid Layout

[CR LEAKS]

In the default style, an article forum in preview mode has a layout of 1:2:2:4:4 in terms of the number of threads (articles) shown on each row, like so:



This can be changed by adding some custom CSS to the extra.less template.

Equal Grid - Floating Footer​

Adding this code will produce a uniform grid layout with the footer at the default location, floating below the content in each article:

.block.block--articles.block--previews .block-body .message--articlePreview
{
margin-top: 0;

&:nth-of-type(n)
{
grid-area: unset;

& .articlePreview
{
&-main
{
flex-direction: column;
}

&-image
{
width: 100%;
}

&-title
{
font-size: @xf-fontSizeLarger;
}

&-content .bbWrapper:after
{
background: none;
}

&-meta
{
border-top: solid 1px @xf-borderColor;

& .articlePreview-by
{
display: none;
}
}
}
}
}

Equal Grid - Fixed Footer​

Using this code will result in an equal grid layout with the footer fixed to the bottom of each article:

@media (min-width: @xf-responsiveMedium)
{
@__ctaArticleFooter: 40px;

.block.block--articles.block--previews .block-body .message--articlePreview
{
margin-top: 0;

&:nth-of-type(n)
{
grid-area: unset;

& .articlePreview
{
&-main
{
flex-direction: column;
min-height: 100%;
padding-bottom: @__ctaArticleFooter;
}

&-image
{
width: 100%;
}

&-title
{
font-size: @xf-fontSizeLarger;
}

&-content
{
margin-bottom: -@__ctaArticleFooter;
}

&-footer
{
position: relative;
bottom: @__ctaArticleFooter;
}

&-meta
{
border-top: solid 1px @xf-borderColor;

& .articlePreview-by
{
display: none;
}
}
}
}
}
}

.message--articlePreview .articlePreview-image+.articlePreview-text .bbWrapper:after
{
background: none;
}

Specific Nodes​

To only apply the layout to a specific node, wrap the code like so, replacing the 2 with the node ID:

[data-container-key="node-2"]
{
...
}

To apply it to multiple nodes, add additional node IDs comma separated like this:

[data-container-key="node-2"],
[data-container-key="node-4"],
[data-container-key="node-8"]
{
...
}

Here you can see the layout is applied to one node but not the other.



The styling can of course be adjusted to suit your particular needs.
If you found this tutorial useful, donations of positive emojis are gladly received.