0

I'm trying to achieve the following:

enter image description here

Currently WordPress display them in 1 column:

enter image description here

Is there code I can Add to the template file, to display all the blog post in this grid layout

0

Without knowing the structure, class names, ids etc. it would be impossible to give you an answer that would help.

But lets say that the structure is ul>li*6

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

The must basic of css that would create such a design would be

ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 20px 50px;
}

You would need to adjust the gap im sure, but this is a good starting point

EDIT

Ok so following your answer with the image the css target would be .page-content, but that could target other elements with the same class.

Try looking for a parent with a unique class or id that you can use to make sure your css only target that specific element

2
  • Please comment below – Anrich Vigus May 10 at 10:10
  • Wonderful it works!! thanks a million – Anrich Vigus May 10 at 10:20

Not the answer you're looking for? Browse other questions tagged or ask your own question.