Control Elementor Loop Grid Layouts With Simple CSS
ฝัง
- เผยแพร่เมื่อ 28 ก.ค. 2024
- Do you use Elementor's Loop Grid widget, but get frustrated by the lack of flexibility when it comes to positioning items on the grid? Let us show you how to take control of your Loop Grid layouts using nothing more than a few lines of simple CSS!
We'll show you how to center and change the width of items on the last row of a grid to create symmetrical, responsive layouts that will elevate the styling of your web pages.
Here is the CSS used in the video:
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 2;
}
/* 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(3n + 2) {
grid-column-end: 4;
}
/* One orphaned item on last row - CENTERED */
body[data-elementor-device-mode=desktop] selector div[data-elementor-type="loop-item"]:last-child:nth-child(3n - 1) {
grid-column-end: 5;
}
/* One or two orphaned items on last row - FULL WIDTH */
body[data-elementor-device-mode=desktop] selector div[data-elementor-type="loop-item"]:nth-last-child(2):nth-child(3n + 2),
body[data-elementor-device-mode=desktop] selector div[data-elementor-type="loop-item"]:last-child:nth-child(3n) {
grid-column: span 3;
}
body[data-elementor-device-mode=desktop] selector div[data-elementor-type="loop-item"]:last-child:nth-child(3n - 1) {
grid-column: span 6;
}
You'll need Elementor Pro to follow along with this tutorial. Download Elementor Pro here:
bit.ly/elementor-kg
We may receive a small affiliate kickback if you purchase any of these solutions using our links. Thanks for your support!
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 !
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;
}
Many thanks for your input!
Very cool Chris, many thanks!
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
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;
}
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.
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!
@@KingGrizzly Thank you
@@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;
}