Use CSS Grid to create responsive hero images and banners with CSS and HTML (no JavaScript)

[@tonytony-fc6gq]

THANK YOU 100 TIMES, watched over 10 hours of grid videos , trying to know how to do exactly what you was doing i even went to w3 schools in your video before fing your videos , THIS BY FAR IS THE BEST WELL EXPLAINED on grid , I CANT THANK YOU ENOUGH you saved me headaches , i was having same problems YOU NAILED IT ,

[@bill-raymond]

That is very nice of you to say! I dealt with the same issue you did and that is why I created the video. This seemed like the easiest part of building a website and was by far the second-most difficult thing for me to figure out (I will be posting on the first one sometime soon).

[@papasilverhand]

Saved my job with this video. thanks G.

[@bill-raymond]

Wow! Great! I love to hear when these videos help!

[@tonytony-fc6gq]

HONESTLY you make a great teacher

[@bill-raymond]

Thank you!

[@MarcO-gv3ir]

Thanks Bill. It worked well, even so I still don't understand why I have to make the banner-image a grid, since the top-banner-section is already a grid. But this made the difference. I was experience the challenge that the image wouldn't adopt to the grid. Trying your solution solved my problem. But I'm still trying to figure out the why.

[@bill-raymond]

I wish I was more an expert, but I’m not, so I will give you my opinion. I think by saying `display: grid`, you are giving the container the ability to be a grid and therefore play by the rules of a grid. If that makes sense?

[@MarcO-gv3ir]

@@bill-raymond You seem to be more of an expert than you might think. As you wrote, you seemed to have banged your head to the wall for quite some time to come up with this. It seemed to be unlogic at first, and I guess it is neither by the books or has been designed like this (otherwise I would probably have seen it in any of the tutorials or documents that I've been screening) but it works. Full stop. Congrats Mr. Nutcracker. ;-)

[@bill-raymond]

@marc thank you :)

[@inglesdegraca6730]

Thanks!!!!

[@bill-raymond]

You are very welcome!

[@nick8292]

Bill, can this be fairly easily implemented into a Jekyll site, like the one you build in your other videos?

[@bill-raymond]

Nick yes, it can. I’m actually working on a video series to show you how you can create it as a reusable Jekyll component. But absolutely you can use it as is in any Jekyll site. Be aware IE support isn’t as easy since some of the SASS does not build well for older versions of IE when using Jekyll Build. I finally gave up and put a message on my site if you are using an older non-Chromium IE browser and called it a day :).

[@nick8292]

Great! Thanks for the detailed reply.