Learn GRID-AREA to Build Amazing BENTO GRIDS | CSS Tutorial

Build BENTO GRIDS with grid-template-areas and grid-area with HTML and CSS only. This is a CSS Grid beginner Tutorial explaining the concept of grid-areas

👉 Become a Member to Support our Channel:

This video will teach you how to build modern Bento Grids with HTML and CSS using grid-template-areas and grid-area. These properties will allow you to stretch grid items across multiple columns and rows. You will learn how to combine grid-areas with media queries and implicit css grids.

BEGINNERS START HERE:
👌 Get our HTML & CSS Course here:

Checkout our website for more:

Host Your Own Website With Hostinger:
✌️ And get a huge discount with our code: CODING2GO

#cssonly #csstricks #webdevelopment

RELATED CONCEPTS YOU SHOULD LEARN:

CONCEPTS YOU WILL LEARN:
✔ grid-template-areas
✔ grid-area tutorial
✔ grid areas tutorial for beginners
✔ how to build bento grids
✔ bento grid design trend
✔ css bento grid layout
✔ how to make a css grid responsive
✔ HTML, CSS ONLY
✔ CSS Grid beginner tutorial
✔ Responsive Web Design
✔ CSS Tricks
✔ css tips
✔ css tips and tricks
✔ css grid and media queries
✔ grid-template-areas explained

SOURCES FOR IMAGES AND RESEARCH
Givingli, ClickUp, Fey, HALO LAB: Brewbolt Branding, Limelight, MindMentor, Paragon, @alex_barashkov

👉 If you want to learn more get our CSS complete course here:

[oluwaseunakanbi]

The coding section is clean and bold. This is how every coding section for learning should look like 👍

[truthwillout]

Exactly what I've been looking for after a few weeks of grappling with flex. Wasn't sure what I was looking for so thank you very much!

[MustafaElghisha]

My man is shooting CSS gold bullets right up to our heads, very nice yet clear explanation thank you.

[mohamedelbarrah]

Than for this amazing explanation,
You are the best!!!❤

[gohrcat]

What browser do you use, or maybe what setting might other browsers have to enable that viewport resizing dev tool? I would really appreciate having it lol

[RASTUDIO_]

Golden man came to YouTube. Please upload videos at the daily base please 🥺. Love From Pakistan...

[nickolaizein]

Every video is amazing! I use what I learned here in my own projects and improve old ones! Thanks for information!

[sergebelangerjr]

Love your videos, i watch, pause and try out. Keep Up the good work!

[Conxaine]

Thx for the tutorial ! It helped me a lot ♥

[ahjsbkdjhavkcjhvac]

love your tutorials man! keep up the good work!

[OnlyADownstat]

nice explanation...template-areas are so easy to define, change and read..

[judyodiakose]

Thanks for this. Do you have a discord for mentoring?

[shohan]

Bro, your content helped us a lot to learn css. You explain in the easiest way. Please start making tailwind css tutorials

[FundamSrijan]

Can you pls make a grid only video showing its different properties 🙏

[ChrisNotFound_]

Brother, I have seen your video of Learn CSS Flexbox in 20 minutes can you please post videos like that, it's very helpful !

[buildstone.community]

Please make a video on how to make "Breadcrumb navigation"

[VivekTrend_Official]

You can make videos on the tailwind css

[CodeCraftify]

This video is very informative for beginners. Keep it up, bro! 🔥🔥

[yashthakur]

Sir where I get your html and css complete course I am your channel member. .

[gamingbeast]

great video. learned snomething new and you forgot to put an end screen.