New to foundation 6: please, could you give me a small tip on how to proceed to achieve a simple news pagination?

Hi, I finally switched to Foundation 6/ I have been reading the documentation and checking the templates for a few days, yet I am failing to achieve some easy tasks. For example, I was trying to paginate a simple news website like this one:

The code I have so far is the following:

   <div class="grid-container">

    <div class="grid-x grid-padding-x align-center-middle text-center">
        <div class="cell small-8"><p><img src="https://source.unsplash.com/random/300x400" alt="img1" style="border-radius: 10%;"></p></div>
        <div class="cell small-4"><p><img src="https://source.unsplash.com/random/150x200" alt="img2"></p><p><img src="https://source.unsplash.com/random/700x400" alt="img2"></p></div>
     
    </div>
</div>

However, first of all, the content are not centered like in the picture. Second, I am still not sure how to create a layout like that: should I nest the cells in the right columns?

What would be the fastest way to code something like that?

Thanks in advance.

This looked kinda fun, so I tried it out. You’ll probably have to drag out the sample area to see it 2-columns.

2 Likes

that’s amazing, thank you so much for the time you spent on it! I really appreciate it, I will work on it further to see what I can do next!!! Cheers!

For the outer columns I used medium-7 and medium-5. That way, on small, everything goes down to one column. Nested inside the medium-5, I added what used to be called rows (grid-x now) of 2 columns, 1 column, 2 columns. I made the random photos wider and then Foundation sizes them down as needed. Foundation is awesome. I hope you have a good experience with it.

1 Like