Elementor CSS Grid
The “Photo Gallery” below was created using Elementor Grid Container. The Grid Container is potentially the most powerful addition to Elementor in a long time but, there’s a problem. At the time of writing, the Grid Container does not support “span” options which means, out of the box, you’re limited to equally sized grid elements which is fine, if that’s what you want. However, with just a little custom CSS we can do so much more …
Bear Faced
Stephanie - A Day at the Zoo
Featuring Stephanie Bridges. Hair & makeup Charlotte Bridges. Wardrobe courtesy of Hendricks Leatherwear, London W2.
What the custom CSS looks like
You’ll see a lot of repetition in the CSS below and that’s because we’re using the same structure for each of the photos and the text block. Each photo (actually a background image) is contained in its own flexbox container, and each flexbox container has a class of c1 to c8. We insert a grid container of 5 columns and 6 rows in Elementor. Then in the top left cell, we insert a flexbox container with a class of c1. We can then see in the CSS (below) that we’re asking that container to span rows 1-4 and columns 1-4, giving us a square image. The rest should be fairly easy to follow.
The custom CSS is inserted in the advanced settings of the grid container itself.
/* Block 1 */
.c1 {
grid-row: 1/4;
grid-column: 1/4;
}
/* Block 2 */
.c2 {
grid-row: 1/3;
grid-column: 4/6;
}
/* Block 3 */
.c3 {
grid-row: 3/5;
grid-column: 4/6;
}
/* Block 4 */
.c4 {
grid-row: 4/5;
grid-column: 1/4;
}
/* Block 5 */
.c5 {
grid-row: 5/7;
grid-column: 1/3;
}
/* Block 6 */
.c6 {
grid-row: 5/7;
grid-column: 3/5;
}
/* Block 7 */
.c7 {
grid-row: 5/6;
grid-column: 5/6;
}
.c8 {
grid-row: 6/6;
grid-column: 5/5;
}
