Presenting latest posts from a 2x3 row/column format

support
1

I am trying to create a feature on my site that cycles new posts in the following form:

image.png3102×1412 1.35 MB

where the top left is the latest post and the bottom right is the oldest to be featured. I dont know what to call this kind of format and I am unsure how this can be translated into Hugo’s Golang Template. Anyone here had any success with the loops and such to do this? Any help would be greatly appreciated!

2

I think you’re solution is in CSS, not necessarily Hugo. With Hugo you can limit your range and with CSS display flex property (probably Flex wrap) you can create rows. If that’s what you’re looking for, my favorite flexbox cheatsheet is this one: http://yoksel.github.io/flex-cheatsheet/

1 Like
3

I agree with @budparr this is CSS related. Although if you feel like supporting IE 11 for Windows 7, you might have to consider something other than flexbox (like e.g. display:inline-block).

1 Like
4

Flexbox has reasonably good support in IE11. Just keep an eye out for flexbugs:

1 Like
5

More powerful you can use css grid (ie11 with polyfill.io, only old android doesn’t support grid)

 {display:grid;
    grid-template-columns:1fr 1fr 1fr; 
    grid-gap:3rem;}
2 Likes