Skip to main content


This topic contains 4 replies, has 3 voices, and was last updated by  Christian Thorne 5 months, 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #282460

    Christian Thorne


    I would like to style a post feed module (Divi theme) so that the first column is 50% width and the rest of the 7 are 25%, creating a grid like this

    I have this CSS grid code so far, but I can’t find a way of editing it to get the desired layout.

    .ds-grid-blog .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: repeat(5, 18%);
    grid-column-gap: 2.5%;}

    Is there some code I could add like “column-one, row-one: 50%;”

    Any help would be much apreciated,,, thanks.



    I am not sure exactly how to solve your scenario. but refer this link might be helpful for you.



    Christian Thorne

    Thanks yoyo,, I’ll check it out.

    If it helps the page (post feed) I’m trying to work on is



    What you have there is a FOUR column grid, not a FIVE column one.

    Then just tell the first item to be TWO columns wide.


    Christian Thorne

    Thanks @paulie_d, this would normally work, but becuase I am trying to style a post feed module, I only have one class to work with (I can only assign one class), and the elements are childs of that class. For example this code makes the first column 50%, but it repeats on the next row.

    .bloggrid-no-excerpts-news-test .column.size-1of3:nth-child(1) { width: 47.667% !important; }

    I have tried lots of different nth-child formulas but I can’t break out of the child parent relationship… Do you think a combination of both might work?


Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star