Bricks Mixed Grid: Create a Flexible Boxed/Stretched Two-Column Layout
Channel: Daveden WebDev
Date: 2024-03-01

In this video, we extend the previous tutorial using CSS Grid for overlapping two columns where one remains within the boxed area and the other is stretched to the edge of the viewport. 

The key ideas used in this video are:
1.Using CSS Framework
2. Named CSS Grid Template Lines
3. CSS Variables
4. BEM Naming Methodology

► CODE SNIPPET ◄ 
https://daveden.co.uk/tutorials/bricks-mixed-grid-flexible-boxed-stretched-two-column-layout/

► PLAYLIST ◄ 

Subscribe for more Elementor and Bricks tutorials: 
🔗 https://davedens.link/subscribe

► Support my channel ◄ 
Buy me kofi - https://davedens.link/kofi
Donate on PayPal - https://davedens.link/paypal

► Connect with me: ◄ 
📺 Subscribe: https://www.youtube.com/@daveden2
👍 Facebook: https://www.facebook.com/daveden2
🐦 X (formerly Twitter): https://x.com/Daveden2
🌐 Website: https://daveden.co.uk/

► Recommended Tools (Affiliate Links - Support the Channel!) ◄
🔗 Elementor Pro - https://davedens.link/elementor
🔗 Dynamic Shortcodes - https://davedens.link/dsh
🔗 Crocoblock JetEngine - https://davedens.link/jetengine
🔗 Bricksbuilder - https://davedens.link/bricks
🔗 WDesignKit - https://davedens.link/wdkit
🔗 Epidemic Sounds - https://davedens.link/sounds
🔗 Hostinger: https://davedens.link/hosting

⏱️ Timestamp
00:00 - Intro
00:21 - The Global CSS
01:08 - The initial layout in Bricks
01:48 - Adding the class names
04:00 - Making adjustments per section
07:25 - Preview of Mixed Grid Layout
08:22 - Adding block padding to the content wrapper
09:10 - Please like, share and subscribe

🚨 Disclaimer:
Please note that some of the links in this description are affiliate links. If you choose to purchase a product or service through these links, I may receive a small commission at no extra cost to you. Your support enables me to continue delivering free content to you each week!

🎵 Soundtrack:
"Life is a Dream" by Michael Ramir C. 🎶