How to create RESPONSIVE Layouts with CSS GRID

Responsive Sidebar, Navbar, Main, Footer Layout, How to use CSS Grid Layouts for beginners | Responsive CSS Grids with grid-template-areas, fractional units and media queries.

Learn more about CSS Grid in our course:

Learn CSS Positions in 4 Minutes:

Become a Member to Support our Channel:

Checkout our website for more:

Concepts you will learn in this video:
CSS Grid Layouts
grid-template-areas
css grid fractions
how to create a sidebar layout with css grid
how to create responsive websites with css grid
css grid tutorial for beginners
media queries
grid-template-columns
grid-template-rows
how to use grid fractions
create a navbar, sidebar, main, footer, layout
use css grid for entire website layout
use css grid for website layout
entire website with css grid
body layout with css grid

[codinggo]

Since many have pointed out that the fixed offset value of 50.4px is not optimal... You are right! Here is an alternative approach: Instead of using the dev tools to find out the height of the navbar we could
1. Declare a height to our navbar and use that value for the offset
2. Make sure to use css units like rem for the navbar's height to account for changes with the font-size
3. Use box-sizing: border-box; or remove the padding in the navbar so that it doesn't interfere with the height/offset

New Version:

nav{
height: 3rem;
top: 0;
position: sticky;
grid-area: navbar;
background-color: blue;
color: white;
}
aside{
height: calc(100vh - 3rem);
top: 3rem;
position: sticky;
align-self: start;
grid-area: sidebar;
background-color: grey;
}

[kareembamidele]

My confidence level on css grid just get boosted. Coding2go to the rescue🎉

[ryou.]

Great and informative tutorial. You taught in 11 minutes what our professor couldn't the entire semester.

[DN]

Thank you for sharing this video!

Appreciate the emphasis on HTML and CSS semantic simplicity. This really doesn't need to be complex.

With regard to scrolling the MAIN element while reliably maintaining HEADER and FOOTER elements variable heights without JS or extra comparatively complex CSS, I have found that setting HTML, BODY, APP-CONTAINER (or whatever wrapper your framework gives you), MAIN, and ARTICLE to overflow: hidden, then setting SECTION to overflow-y: auto, assuming that is your direct DOM path from the root element to the scrollable element, allows native browser scrolling bahvior for one to many scrollable elements (SECTION in this case), without JS or extra CSS to track and offset element heights.

The HEADER and FOOTER element content (plus the content padding/margins) "intrinsically" determine the height of the HEADER and FOOTER. When HEADER and FOOTER element content naturally wrap to the next line, changing their height, the scrollable SECTION elements respond intrinsically.

This "intrinsic layout" approach has helped avoid the complexities of other techniques, while achieving similar or better results, especially with edge cases.

Be encouraged and keep up the great work!

[asaduzmn]

You are so good at teaching any complex topics easily. ❤

[kaustavmanna]

Ossam Bro... Your Work is too good.... My CSS concepts are fine tuned ....
Love from India 🇮🇳

[Multidimensional.Analyst]

I've just started learning HTML & CSS today. Very informative

[shidi]

Great tutorial! Would also style the button to display none outside of the media query 😎

[hasibsujon]

I just love this channel because, How this channel will explain the computer language to you is just mind blowing. Even a noob like me feels like a pro when I watch any video of this bro.✌️❤️❤️

[MOHAMMEDKHALANDER-gc]

And here we got one more awesome and wonderful video from Grid, yeeehhhh let's thanks a lot sir.
Love from all coders ❤❤❤.. You are true youtuber and great professor sir, 👏 thank you so much sir.

[wlockuz]

Awesome showcase, but I would personally fix the height of navbar and use it as a reference everywhere instead picking the computed height from dev tools.

[Aosses]

I use Quickly CSS Grid to build HTML CSS, and it works perfect :)

[myfunnyval]

I'm using a screen reader, and trying to follow the video and work at the same time is proving tricky. Is the source code available. Happy to buy you a coffee...

[oztechph]

this is what I'm waiting for! Thank you sir! make more tutorial like this

[zramdeen]

I had a weird bug when following this. If the main content area has too little content, when resizing, it doesn't get pushed over all the way.

I fixed it by updating the grid layout in the media query.

body {
grid-template-areas:
"navbar"
"main"
"footer";
}

[ankitxnarwal]

Hi Sir please start Tailwind CSS,
Love from India 🇮🇳

[Mr.Useless]

Great video <3
Waiting for the next video.

[timothyknapp]

Is there a way to make the side and nav bars modular? Meaning i only need to make a single nav.html file and single side.html file that can get ported into many content pages. That way if my site grows i can alter just a single nav file and the changes take affect across my entire content. By the way i need a client side solution.

[brianm]

@coding2GO why did you not use fixed instead of sticky?

[Dexterx]

Any chance of a grid gallery tutorial?