Control Elementor Loop Grid Layouts With Simple CSS

[@ElementoryMyDearWatson]

Very cool Chris, many thanks!

[@Arnoldodo-e4h]

Hi ! It's possible to do so with "Apply an alternative template". But in this case, to control Posts individually, you have to sort them by date in Query menu, and modify them by putting fictitious dates on the posts so that they are displayed in the right order... In any case, thanks for this interesting method with CSS !

[@matteodefinis1402]

hi Chris, is it possible to avoid the gap between columns and rows in the widget?

[@KingGrizzly]

Yes, if you select the Loop Grid widget and go to the 'Style' tab on the left, the controls to set the gap between columns and rows are in there. You can set them both to '0px' if you want no gap at all.

[@ramiroperez268]

Hi Chris! Thanks a lot for your valued support. I've tried to do this example for a loop. This is the question, i will like have a section where the 100% have two articles 50% for one and 50 % for the other, but when i have one article this occupy the 100%. At the tuttorial you explain good this whit 10 and 11 colums in full width but when i tried whit two columns i cant do it. Can you show me where I'm going wrong? Best regard, Ramiro

[@KingGrizzly]

Thanks for watching Ramiro! Try this - hopefully it should achieve what you're looking for... selector .elementor-grid { grid-template-columns: repeat(6, 1fr); } body[data-elementor-device-mode=desktop] selector div[data-elementor-type="loop-item"] { grid-column: span 3; } /* Two-column 50/50 - one full-width orphaned item on last row */ body[data-elementor-device-mode=desktop] selector div[data-elementor-type="loop-item"]:last-child:nth-child(2n) { grid-column: span 6; }

[@yoonimp2083]

Hello Chris, here’s what I’ve been looking for. Thank you very much for the great lessons. Could you please help me if I need to display 4 columns, do I need to add or modify the code? I’ve tried to do it myself but haven’t succeeded yet.

[@KingGrizzly]

Hi, thanks for watching! For 4 columns, you'll want to use this line instead... grid-template-columns: repeat(8, 1fr); If you then continue to use 'grid-column: span 2;', you should end up with 4 columns (i.e. 8 / 2 = 4). You'll need to adjust the values used in the remaining lines of CSS, to adjust which column numbers the centered items end on, and how many they span too, but hopefully this will set you on the right track. Good luck!

[@yoonimp2083]

@@KingGrizzly Thank you

[@KingGrizzly]

@@yoonimp2083 This should work - it will centre either one, two or three orphaned items on the last row in a four-column layout: /* Four column layout */ selector .elementor-grid { grid-template-columns: repeat(8, 1fr); } body[data-elementor-device-mode=desktop] selector div[data-elementor-type="loop-item"] { grid-column: span 2; } /* Three orphaned items on last row - CENTERED */ body[data-elementor-device-mode=desktop] selector div[data-elementor-type="loop-item"]:nth-last-child(3):nth-child(4n - 2) { grid-column-start: 2; grid-column-end: 4; } /* Two orphaned items on last row - CENTERED */ body[data-elementor-device-mode=desktop] selector div[data-elementor-type="loop-item"]:nth-last-child(2):nth-child(4n - 2) { grid-column-start: 3; grid-column-end: 5; } /* One orphaned item on last row - CENTERED */ body[data-elementor-device-mode=desktop] selector div[data-elementor-type="loop-item"]:last-child:nth-child(4n - 2) { grid-column-start: 4; grid-column-end: 6; }

[@yoonimp2083]

Thank you for the knowledge you provided. I would like to add some information for those who are watching this video and want to display data in 4 columns and 5 columns. This might be helpful for everyone in the future. ------------------------- 5 Column ------------------------- selector .elementor-grid { grid-template-columns: repeat(10, 1fr); } body[data-elementor-device-mode=desktop] selector div[data-elementor-type="loop-item"] { grid-column: span 2; } /* 2 orphaned items on last row - CENTERED */ body[data-elementor-device-mode=desktop] selector div[data-elementor-type="loop-item"]:nth-last-child(2):nth-child(5n+2) { grid-column-end:6; } /* 3 orphaned items on last row - CENTERED */ body[data-elementor-device-mode=desktop] selector div[data-elementor-type="loop-item"]:nth-last-child(3):nth-child(5n+2) { grid-column-end:5; } /* 4 orphaned items on last row - CENTERED */ body[data-elementor-device-mode=desktop] selector div[data-elementor-type="loop-item"]:nth-last-child(4):nth-child(5n+2) { grid-column-end:4; } /* 1 orphaned items on last row - CENTERED */ body[data-elementor-device-mode=desktop] selector div[data-elementor-type="loop-item"]:nth-last-child(1):nth-child(5n+2) { grid-column-end:7; } ------------------------- 4 Column ------------------------- selector .elementor-grid { grid-template-columns: repeat(8, 1fr); } body[data-elementor-device-mode=desktop] selector div[data-elementor-type="loop-item"] { grid-column: span 2; } /* 2 orphaned items on last row - CENTERED */ body[data-elementor-device-mode=desktop] selector div[data-elementor-type="loop-item"]:nth-last-child(2):nth-child(4n + 2) { grid-column-end: 5; } /* 3 orphaned items on last row - CENTERED */ body[data-elementor-device-mode=desktop] selector div[data-elementor-type="loop-item"]:nth-last-child(3):nth-child(4n+2) { grid-column-end:4; } /* 1 orphaned items on last row - CENTERED */ body[data-elementor-device-mode=desktop] selector div[data-elementor-type="loop-item"]:last-child:nth-child(4n + 2) { grid-column-end: 6; }

[@KingGrizzly]

Many thanks for your input!