• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

virusword.com

Learn Wordpress

  • Home
  • WordPress Shop
    • Fotopress
    • SEO Tool Kit
    • Social Contact
    • Tag Machine 2
    • Video Profits
  • Latest News
  • WordPress
    • Plugins
    • Themes
    • Tutorials
    • Videos
    • Woocommerce
  • About Us
  • Contact Us
    • Terms of Service
    • Privacy Policy
  • Show Search
Hide Search
Home/Videos/CSS Grid Bespoke Layout with Span – Elementor Wordpress Tutorial

CSS Grid Bespoke Layout with Span – Elementor WordPress Tutorial



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

Written by:
Abdul Wahid
Published on:
November 8, 2023

Categories: VideosTags: css, CSS Grid, css grid and flexbox, CSS Grid Bespoke Layout with Span - Elementor Wordpress Tutorial, CSS Grid Elementor, css grid vs flexbox, CSS Span, elementor 3.13.1, Elementor Grid, elementor grid builder, elementor grid container, elementor grid layout, Imran, Imran Siddiq, Siddiq, Span Column, Span Row, Squadron, UK Web Design, UK Web Designers, Web, web design, Web Squadron, website, WebSquadron, wordpress, wordpress tutorial, wordpress tutorials, wordpresstutorials

Reader Interactions

Comments

  1. Armando Lopez

    November 8, 2023 at 10:26 am

    You just saved me countless of time. Thanks ser

  2. Chris Hodson

    November 8, 2023 at 10:26 am

    Great vid again! Is it possible to populate that kind of grid with dynamic content / custom post types?

  3. sanjay bhatikar

    November 8, 2023 at 10:26 am

    Nice, thank you! Can I have a grid in a blogpost?

  4. Vegard Bell

    November 8, 2023 at 10:26 am

    Will this be implemented in the GRID module, instead of using custom CSS?

  5. Rakibul Hashan

    November 8, 2023 at 10:26 am

    Thanks for this great tutorial!

  6. Carmen Teriaca

    November 8, 2023 at 10:26 am

    aspect-ratio: 16/9 /* when the image feels too square in mobile */

  7. Jason

    November 8, 2023 at 10:26 am

    Another decent feature and nice video to explain it all, thanks Imran.

  8. Skopelos

    November 8, 2023 at 10:26 am

    Very nice video! Making sense of this now.
    Somehow, my layout worked without the 'grid-row: 1/3;' of the code!
    Thanks Imran!

  9. Wicky Design

    November 8, 2023 at 10:26 am

    Nice! Thanks for creating this tutorial!

  10. Jao Ortega

    November 8, 2023 at 10:26 am

    Another awesome walkthrough mate. It saves me a lot of time figuring things out with this. Thank you!

  11. Elementory My Dear Watson

    November 8, 2023 at 10:26 am

    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)

  12. el jedi

    November 8, 2023 at 10:26 am

    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..

  13. jough

    November 8, 2023 at 10:26 am

    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?)

  14. Harish Kumar

    November 8, 2023 at 10:26 am

    Very informative video imran ๐Ÿ‘ thanks

Primary Sidebar

Wordpress

  • Content Management Systems (2)
  • Digital Marketing (4)
  • Internet Marketing (28)
  • Latest News (458)
  • Online Business (2)
  • Plugins (519)
  • Themes (521)
  • Videos (1,350)
  • Website Development (1)
  • Woocommerce (589)
  • WordPress (6)

Recent Articles

Unlock Your Internet Marketing Potential with WordPress: Tips, Tools, and Strategies

How to Use WordPress to Achieve Your Internet …

Continue Reading about Unlock Your Internet Marketing Potential with WordPress: Tips, Tools, and Strategies

Unlock Your Internet Marketing Potential: Harnessing the Power of WordPress

How to Use WordPress to Achieve Your Internet …

Continue Reading about Unlock Your Internet Marketing Potential: Harnessing the Power of WordPress

Search our site

Explore more

Get our Wordpress Guide Get Plugins Get Connected

Footer

VirusWord by Promaps, Inc.

Barnes Place
Colombo 7, Western 00700

Copyright © 2025 ยท Promaps, Inc.

Keep In Touch

  • Email
  • Facebook
  • Instagram
  • Pinterest
  • Twitter