Thanks very much. Did some digging after watching this video, turns out you can use span to make it auto-flow so you don't have to specify the exact start & stop. This way it just auto-flows accordingly: selector { grid-column: span 2; grid-row: span 2; }
If you use a gap value, then alignments seem to be off. For example, try to make a 2 column look with the following on 2 containers: selector { grid-column: 1/7; } selector { grid-column: 7/13; } The end result isn't centered. The gap sits to the right of the first container. It's like we are stuck in a loop. If we use flex, alignment is hard because a different number of gaps on sequential rows makes alignment near impossible since the math works out differently when the total gap space differs (eg: 2 columns has 1 gap vs 4 columns which has 3 gaps). I'm trying to think how to vertically align with grid and these span styles.
Happy New Year, Imran! // I don’t understand why Elementor gave us a such a barebones implementation of Grid. You can add custom CSS, but we should be able to adjust all aspects of grids using the builder. Hopefully, they will flesh it out in upcoming releases. Have you seen or heard anything about them improving their Grid features?
I love all these grid tips. I understand the CSS field lets you instantly see the effects, but when you get it all sorted, would you just keep it there or put it into a Code Snippet if this was for an actual project?
love it, another very well articulated bite size tutorial !! THANK YOU
Alright, this has been helpful. It has helped me to reduce the nesting of containers.
Thanks very much. Did some digging after watching this video, turns out you can use span to make it auto-flow so you don't have to specify the exact start & stop. This way it just auto-flows accordingly:
selector {
grid-column: span 2;
grid-row: span 2;
}
...and VOILA! You have a bento grid! 👍
Amazing. Thank you
nice , how to add image and text underneath without containers?
If you use a gap value, then alignments seem to be off. For example, try to make a 2 column look with the following on 2 containers:
selector {
grid-column: 1/7;
}
selector {
grid-column: 7/13;
}
The end result isn't centered. The gap sits to the right of the first container. It's like we are stuck in a loop. If we use flex, alignment is hard because a different number of gaps on sequential rows makes alignment near impossible since the math works out differently when the total gap space differs (eg: 2 columns has 1 gap vs 4 columns which has 3 gaps).
I'm trying to think how to vertically align with grid and these span styles.
Happy New Year, Imran! // I don’t understand why Elementor gave us a such a barebones implementation of Grid. You can add custom CSS, but we should be able to adjust all aspects of grids using the builder. Hopefully, they will flesh it out in upcoming releases. Have you seen or heard anything about them improving their Grid features?
I love all these grid tips. I understand the CSS field lets you instantly see the effects, but when you get it all sorted, would you just keep it there or put it into a Code Snippet if this was for an actual project?
If you only plan to have 1 or 2, then it could be added to Custom CSS for the Theme.
Nice Imran 👍
Muito legal essa possibilidade. Obrigado por essa aula.