Divi Theme How To Create A CSS Grid Layout For Your Modules 👈

by | Apr 16, 2021 | 0 comments

Divi Theme How To Create A CSS Grid Layout For Your Modules 👈

by | Apr 16, 2021 | CSS Tips and Tricks | 0 comments



Divi Theme How To Create A CSS Grid Layout For Your Modules. The Divi theme from elegant themes is absolutely awesome.

Title Scroll Effect Video: https://youtu.be/bxaXxPWDfS8

Contact Form With File Upload Video: https://www.youtube.com/watch?v=DQ35gqzm674

Youtube Video Background Video: https://www.youtube.com/watch?v=2ZAzUoPl5Z8

Divi Supreme Modules Playlist: https://www.youtube.com/watch?v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw

Divi Brain Free Plugin Playlist : https://www.youtube.com/watch?v=X690rObOd3w&list=PLqabIl8dx2wpnMFBgEd_4yqtsaKYzUNwd

Divi 4 Theme Create An Ecommerce Store In One Hour: https://youtu.be/qP-ViPakoSw

How To Create A Global Footer Video: https://youtu.be/Wf864NcNb24

Try out the Divi theme: https://bit.ly/TryDiviNow

Divi Supreme Modules Plugin 10% Off: https://bit.ly/DiviSupremeCoupon

My Blog : https://web-design-and-tech-tips.com

———- CSS CODE USED TODAY: ———-

Row Column

Main Element Desktop

display:grid;
grid-template-columns: 25% 25% 25% 25%;
grid-auto-rows: auto;

Tablet

display:grid;
grid-template-columns: 50% 50%;
grid-auto-rows: auto;

Mobile

display:grid;
grid-template-columns: 100%;
grid-auto-rows: auto;

Module deep

Main Element Desktop

grid-column: 1/2;
grid-row: 2/4;

Tablet

grid-column: auto;
grid-row: auto;

Module Long

Main Element Desktop

grid-column: 2/4;
grid-row: 2/3;

Tablet

grid-column: auto;
grid-row: auto;

———- RECOMMENDED PLAYLISTS ———-

Elementor Ecommerce Store: https://www.youtube.com/watch?v=Sl1Ye9XHhgY&list=PLqabIl8dx2wrrX3YsjpIEL8uq5LnSkrhA

Divi Snippets: https://www.youtube.com/watch?v=x8AURRJVlWE&list=PLqabIl8dx2woGTX6yFqbufkqv-29PiElB

Divi 4 Ecommerce Store: https://www.youtube.com/watch?v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9

Bootstrap 4 Basics: https://www.youtube.com/watch?v=PwUw2kgnkls&list=PLqabIl8dx2wocDgvU7lEirYjNNrm6iXGb

Elementor: https://www.youtube.com/watch?v=bYqbLiWWC-k&list=PLqabIl8dx2woAs4sOmMsgCU0cAqcyiDco

WordPress Tips: https://www.youtube.com/watch?v=3QlczYducdU&list=PLqabIl8dx2wpKhMW14Q1Rxwx864Zwx-1e

———- RECOMMENDED VIDEOS: ———-

Bootstrap 4 Complete One Page Scrolling Website Tutorial : https://www.youtube.com/watch?v=JWmzgixLUUY

Elementor WordPress Builder One Page Scrolling Site In 15 Minutes: https://www.youtube.com/watch?v=CsNmVouqt38

Bootstrap – How to edit a bootstrap template: https://www.youtube.com/watch?v=_yFy5Zw2BQc

Divi Add a live facebook feed to your divi or any wordpress website: https://www.youtube.com/watch?v=4KReMpWdEz8

Divi 4 Theme How To Build A Multi Page Website In 20 Minutes: https://www.youtube.com/watch?v=mNDtB86_hGU

Elementor WordPress Builder How To Build A Parallax Section: https://www.youtube.com/watch?v=aXoCtPAJiGk

———- SOCIAL MEDIA ———-
Follow what I’m doing on:

Facebook: https://www.facebook.com/system22.net/

Twitter: https://twitter.com/22ITSolutions1

Linkedin: https://www.linkedin.com/in/jamie-henry-546b7377/

Support the channel: https://paypal.me/system22

Courses I teach: https://www.udemy.com/user/jamiehenry2/

Subscribe: https://www.youtube.com/channel/UCYeyetu9B2QYrHAjJ5umN1Q

#YouTubeTips #WebDesignTips #FreeWebDesignTutorials #BuildYourOwnWebsite

source