Join our ‘How to Start a Web Design Business’ Course – and use strategies to grow, get clients, and generate recurring income: https://websquadron.co.uk/how-to-start-a-web-design-business/
Book your 1-2-1 Consultation: https://websquadron.co.uk/socials
This is how ti work with CSS Grid Bespoke Layout with Span – Elementor WordPress Tutorial
Code for spanning:
@media screen and (min-width: 780px)
{
selector {
grid-column: 1/3;
grid-row: 1/3;
}
}
We love to create – share – respond – and deliver.
๐ง Learn with our Mastery Modules: https://websquadron.co.uk/web-design-mastery/
๐ All of our Important Links: https://websquadron.co.uk/socials/
๐ Join our Facebook Group: https://www.facebook.com/groups/3309523509284305
๐ Get Code Snippets Pro: https://r.freemius.com/10565/3304295/
๐ Get Elementor Pro: https://be.elementor.com/visit/?bta=25741&nci=5383
๐ Boost your YouTube Analysis: https://www.tubebuddy.com/websquadron
๐ Get our Merchandise: https://websquadron.co.uk/merchandise
๐ฅน Support us: https://paypal.me/Websquadron
Hire us to work on your Website!
๐ info@websquadron.co.uk
๐ฉโ๐ป Visit https://websquadron.co.uk
source
Armando Lopez
You just saved me countless of time. Thanks ser
Chris Hodson
Great vid again! Is it possible to populate that kind of grid with dynamic content / custom post types?
sanjay bhatikar
Nice, thank you! Can I have a grid in a blogpost?
Vegard Bell
Will this be implemented in the GRID module, instead of using custom CSS?
Rakibul Hashan
Thanks for this great tutorial!
Carmen Teriaca
aspect-ratio: 16/9 /* when the image feels too square in mobile */
Jason
Another decent feature and nice video to explain it all, thanks Imran.
Skopelos
Very nice video! Making sense of this now.
Somehow, my layout worked without the 'grid-row: 1/3;' of the code!
Thanks Imran!
Wicky Design
Nice! Thanks for creating this tutorial!
Jao Ortega
Another awesome walkthrough mate. It saves me a lot of time figuring things out with this. Thank you!
Elementory My Dear Watson
Thanks Imran, however, I had to set the min-width to 768px for the CTAs to maintain the two-column span on the tablet as they do on the desktop:
@media screen and (min-width: 768px)
el jedi
cool video, isnt a method to autogrid or autoshrink the grid on other device if a cannot display 3 columns then use one. bricks do it more easier in that way… anyway im using elementor again cause bricks it is not working well with compatibilities..
jough
I believe they'll be adding span controls soon. One nit: you said "when the resolution is greater than 780px". I think you meant when the screen width is greater than 780px. Responsiveness has nothing to do with resolution, something many people watching videos like this get confused about. (also, why 780 instead of 768?)
Harish Kumar
Very informative video imran ๐ thanks