Forums

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
    Posts
  • #282460
    Christian Thorne
    Participant

    Hello,

    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 https://www.screencast.com/t/GNJODhIG3

    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.

    #282548
    yoyo
    Participant

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

    https://gridbyexample.com/examples/

    Thanks.

    #282550
    Christian Thorne
    Participant

    Thanks yoyo,, I’ll check it out.

    If it helps the page (post feed) I’m trying to work on is http://mediaworldwide.co.uk/perfect-storm/ams-test-site/news/

    #282688
    Paulie_D
    Member

    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.

    https://codepen.io/Paulie-D/pen/qgYrJe

    #282691
    Christian Thorne
    Participant

    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?

    Thanks

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.