Articles Anywhere

Category article grid

9 months 4 weeks ago #77987

Livius Chebeleu's Avatar Livius Chebeleu

Hi,

I was trying to use CSS to create a grid of articles from a category. I defined the class like this from CSS docs online:

.party_grid {
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
}

I can't figure out how to structure the article syntax with the div's to create the grid. I'm looking for three columns and then as many rows as it takes for all the articles in the category, I have eight.
Is using CSS to make a grid of articles the correct way? Does it work with this extension?

Would someone please help me to write the code for this?

Thank you/Livius

9 months 4 weeks ago #77988

Peter van Westen's Avatar Peter van Westen Admin

9 months 4 weeks ago #78013

Livius Chebeleu's Avatar Livius Chebeleu

Thanks Peter. That's a great resource for some copy paste action.

I've used the following code from your example but it's not generating rows and columns. The articles are in one column only. Any idea what could be causing it?

<div class="row-fluid">
<p>{articles category="10"}</p>
<div class="well well-sm">
<h2 style="text-align: center;">[title]</h2>
<p style="text-align: center;">[text]</p>
</div>
{if count % 3 = 0}</div>
<div class="row-fluid">{/if}
<p>{/articles}</p>
</div>

You can see the output here: 03654b9.netsolhost.com/studio/parties

Thanks/Livius

9 months 4 weeks ago #78023

Peter van Westen's Avatar Peter van Westen Admin

You code is not including any classnames that your css provides to take care of the 3 column layout.
Only thing you are doing is placing 3 .well divs per .row-fluid div.