Title: Query Loop Latest Posts as list Last modified: July 10, 2022 --- # Query Loop Latest Posts as list * Resolved [itsmeagh](https://wordpress.org/support/users/itsmeagh/) * (@itsmeagh) * [3 years, 11 months ago](https://wordpress.org/support/topic/query-loop-latest-posts-as-list/) * Hello generateblocks Team. Please provide me with step by step guidelines. How can I create a home page like the picture below using generateblocks Query Loop. On mobile and desktop. I am a generatepress premium user. I have tried many ways. But I can’t do this design at all. Kindly help me. * [https://ibb.co/PzDDqpg](https://ibb.co/PzDDqpg) [https://ibb.co/X8gRVwF](https://ibb.co/X8gRVwF) Viewing 7 replies - 1 through 7 (of 7 total) * [fernandoazarcon2](https://wordpress.org/support/users/fernandoazarcon2/) * (@fernandoazarcon2) * [3 years, 11 months ago](https://wordpress.org/support/topic/query-loop-latest-posts-as-list/#post-15813914) * Hi [@itsmeagh](https://wordpress.org/support/users/itsmeagh/), * The setup would be something like this: [https://share.getcloudapp.com/ApuXD56b](https://share.getcloudapp.com/ApuXD56b) * 1. Create a Grid Block with two columns. 2. Set the Container width of the first Container to 33.3% and the other to 66.6%. 3. Put a GB Image Block in the first Container with Dynamic date enabled and Image source as featured image. 4. In the second Grid Container, add a Headline Block, and set its dynamic date to post tile. 5. After that Headline Block, add another Grid Block with two columns. 6. In the first column, add an Image Block, and its source is Author Avatar. 7. Add a Headline Block under it, and set the source to Author name. 8. In the other Container, create a Headline Block with its source as post date. 9. Add the necessary changes in terms of spacing to the different Blocks. * After you’ve set that up, let us know, as you’ll need a little custom CSS to put the meta at the bottom. * Hope this helps! * Thread Starter [itsmeagh](https://wordpress.org/support/users/itsmeagh/) * (@itsmeagh) * [3 years, 11 months ago](https://wordpress.org/support/topic/query-loop-latest-posts-as-list/#post-15814315) * Thank you very much [@fernandoazarcon2](https://wordpress.org/support/users/fernandoazarcon2/) Take a look at the screenshots. and then please guide me to the next step. * [https://ibb.co/RQh4qjK](https://ibb.co/RQh4qjK) [https://ibb.co/f2qqv5X](https://ibb.co/f2qqv5X) [https://ibb.co/vQ22FXP](https://ibb.co/vQ22FXP) * [fernandoazarcon2](https://wordpress.org/support/users/fernandoazarcon2/) * (@fernandoazarcon2) * [3 years, 11 months ago](https://wordpress.org/support/topic/query-loop-latest-posts-as-list/#post-15814354) * Great. Now, here are the new steps: * 1. Add `my-right-cont` to the class list of this second column Container Block( Advance section in Block settings of Container Block): [https://share.getcloudapp.com/NQulj2Ow](https://share.getcloudapp.com/NQulj2Ow) * 2. Then, add this CSS through Customizer > Additional CSS: * ``` .gb-container.my-right-cont > .gb-inside-container { display: flex; flex-direction: column; height:100%; } .gb-container.my-right-cont > .gb-inside-container > .gb-grid-wrapper { margin-top:auto; } .gb-container.my-right-cont > .gb-inside-container .gb-inside-container { display: flex; flex-direction: row; align-items:flex-end; } .gb-container.my-right-cont > .gb-inside-container .gb-inside-container p { margin-bottom: 0px; } ``` * 3. Add Border radius in the spacing section of the Image Block. * Thread Starter [itsmeagh](https://wordpress.org/support/users/itsmeagh/) * (@itsmeagh) * [3 years, 11 months ago](https://wordpress.org/support/topic/query-loop-latest-posts-as-list/#post-15815382) * Thanks Mate, but please guide me a little further. * [https://ibb.co/VL8zF3t](https://ibb.co/VL8zF3t) [https://ibb.co/SVhsvKt](https://ibb.co/SVhsvKt) [https://ibb.co/s25YnCj](https://ibb.co/s25YnCj) [https://ibb.co/YjH8dbc](https://ibb.co/YjH8dbc) * Oh one more thing, I want to design like that [website](https://www.droidthunder.com/) * [fernandoazarcon2](https://wordpress.org/support/users/fernandoazarcon2/) * (@fernandoazarcon2) * [3 years, 11 months ago](https://wordpress.org/support/topic/query-loop-latest-posts-as-list/#post-15816746) * The CSS I provided should put the meta at the bottom. * Can you share the link to your site, and I’ll check why it isn’t working? * Thread Starter [itsmeagh](https://wordpress.org/support/users/itsmeagh/) * (@itsmeagh) * [3 years, 11 months ago](https://wordpress.org/support/topic/query-loop-latest-posts-as-list/#post-15820598) * Thanks [@fernandoazarcon2](https://wordpress.org/support/users/fernandoazarcon2/), I managed to make the whole design my own with a little effort. However, I am grateful to you, because if you had not given guidelines in the beginning, I might not have been able to do the design. * 💕💕💕 * [https://ibb.co/XJY2GTW](https://ibb.co/XJY2GTW) * [fernandoazarcon2](https://wordpress.org/support/users/fernandoazarcon2/) * (@fernandoazarcon2) * [3 years, 11 months ago](https://wordpress.org/support/topic/query-loop-latest-posts-as-list/#post-15820635) * That’s awesome to hear! You’re welcome [@itsmeagh](https://wordpress.org/support/users/itsmeagh/)! Viewing 7 replies - 1 through 7 (of 7 total) The topic ‘Query Loop Latest Posts as list’ is closed to new replies. * ![](https://ps.w.org/generateblocks/assets/icon.svg?rev=3239461) * [GenerateBlocks](https://wordpress.org/plugins/generateblocks/) * [Frequently Asked Questions](https://wordpress.org/plugins/generateblocks/#faq) * [Support Threads](https://wordpress.org/support/plugin/generateblocks/) * [Active Topics](https://wordpress.org/support/plugin/generateblocks/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/generateblocks/unresolved/) * [Reviews](https://wordpress.org/support/plugin/generateblocks/reviews/) * 7 replies * 2 participants * Last reply from: [fernandoazarcon2](https://wordpress.org/support/users/fernandoazarcon2/) * Last activity: [3 years, 11 months ago](https://wordpress.org/support/topic/query-loop-latest-posts-as-list/#post-15820635) * Status: resolved