Grid CSS Responsive Website Layout – “Mobile First” Design

Add MailTag to your browser (it’s free) ➜ https://goo.gl/qZf5Pj
Thank you MailTag for sponsoring this video

In this video we will build a “mobile first” single page website layout using the CSS Grid. We will use modern techniques including relative em units, media queries and even a little flex.

CODE: Codepen

BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

VISIT MY WEBISTE: Check Out My Udemy Courses
http://www.traversymedia.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
Tweets by traversymedia
http://www.instagram.com/traversymedia
https://discord.gg/traversymedia
Video Rating: / 5

About the Author: Han Shuyen

13 Comments

Avetis TG

on December 28, 2017 at 2:13 pm - Log in to Reply

i have done your flex part with grid

#section-b ul {
padding-left: .5em;
padding-right: .5em;
display: grid;
grid-template-columns: repeat(3, 10fr);
grid-gap: 1em;
}
WioSwitch To Switch Digital Pin On/Off

on December 28, 2017 at 2:58 pm - Log in to Reply

👍👍👍👍👍
Haroon Malik

on December 28, 2017 at 3:03 pm - Log in to Reply

I Hit Susbcribe now :)
Dat Nguyen

on December 28, 2017 at 4:00 pm - Log in to Reply

Thanks for sharing. Great content!
entertainment news Channel

on December 28, 2017 at 4:15 pm - Log in to Reply

INSANE Street Food Tour in Saigon, Vietnam | HIDDEN Vietnamese Street Food + fashion FULL HD video 1

https://www.youtube.com/edit?o=U&video_id=hg6KLWXqOvA
Matt Senko

on December 28, 2017 at 5:02 pm - Log in to Reply

i have a question. my images in section B do not line up. All yours do. Is that because they are the same size or did CSS do something that I missed?
Funfetti Gaming

on December 28, 2017 at 5:06 pm - Log in to Reply

i am working on my website blackhillgaming.com @Traversy Media i am going to need a developer like you hit me up
Chris Chandler

on December 28, 2017 at 5:08 pm - Log in to Reply

Great video! CSS Grid is the way to go for layouts.
John Karns

on December 28, 2017 at 6:00 pm - Log in to Reply

Thank you very much. Fantastic tutorial. Great content and explanation.
Bradley Clarkson

on December 28, 2017 at 6:53 pm - Log in to Reply

Nice job man another killer tutorial, i love the part where he was thinking of how amazing Arron Judge is and said Batting instead of Padding... Takes a big man to admit the dominance of a Rival. Just Busting Balls Bro... Great work im hooked on your tuts..
Abh19021

on December 28, 2017 at 7:14 pm - Log in to Reply

You are an amazing man. I think you should make one more CSS grid tutorial.
Mark Dyck

on December 28, 2017 at 8:03 pm - Log in to Reply

Awesome! This was the first time I've followed along and built a page too. What a great way to learn. Thank you!
Steven Kenneth

on December 28, 2017 at 8:52 pm - Log in to Reply

Great video. There is so much to learn when it comes to html 5 and CSS. Do you do special request videos? Say for instance I wanted to build a specific website, would you take this on?