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!
@arnaudchappuis3413
4 ай бұрын
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 !
@ElementoryMyDearWatson
4 ай бұрын
Very cool Chris, many thanks!
@ramiroperez268
3 ай бұрын
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
3 ай бұрын
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; }
Пікірлер: 10