The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Grids – style grid cells independently for a post feed

  • This topic is empty.
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)
  • The forum ‘CSS’ is closed to new topics and replies.