Press "Enter" to skip to content

STOP The CSS Grid Confusion – 2 Ways to GRID!



Go to http://www.get.online to search for your (dot)ONLINE domain now!
— Hey all, today we’re going to cover the CSS grid, and specifically how to structure a layout using the CSS grid implicit and explicit methods!

Codepen (not responsive, maybe you can make it responsive using media queries and the CSS grid properties!?):

Let’s get started!

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS!

My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!

26
Leave a Reply

avatar
26 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
satoribournemouthChristian KilianSteven LukerBarun Khareldh git Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
DesignCourse
Guest
DesignCourse

Omg I'm at 499k. Much excitement I guess? Help me hit that mark by subscribing if you enjoyed this!

Kareem Walls-Sanders
Guest
Kareem Walls-Sanders

Thanks, well taught!

Jason JA
Guest
Jason JA

The background noise ended at 2:15

Paul Newton
Guest
Paul Newton

@DesignCourse 3:03 for future grid teachings may want to occasionally include an animation shifting the grid numbers from centers to starts, this seems to be a consistent pain as most have been conditioned to expect the numbers to be conceptually centered to the respective grid but it almost uintuitively starts on the edges/joints

Ankit Kapoor
Guest
Ankit Kapoor

How to make such designs responsive ??

Sonia Blanche
Guest
Sonia Blanche

chrome shows grid too btw

good guy
Guest
good guy

use mediaquery to make it responsive
just swap places;)

J C
Guest
J C

Excellent job!

Christine Chau
Guest
Christine Chau

What will it look like mobile view?

Theo de Koning
Guest
Theo de Koning

May I ask for that "Part 2" where you explain how to put text and maybe more in all those grids.
Please.

Jeffrey Jennings
Guest
Jeffrey Jennings

Great tutorial, love the explicit example!

Pedro Macedo
Guest
Pedro Macedo

At the cover of the video I thought I saw "2 girls 1 cup"

Ohhdang
Guest
Ohhdang

When defining columns/rows with the FR unit, is there a best practice or convention that says the sum of those FR units need should be even? I noticed for the columns you chose 1fr 1.2fr 1.5 fr (equals 3.7fr total instead of 4fr for example). Thanks!

Sun
Guest
Sun

You're the best 🙏🙇‍♂️

KVNCNLS
Guest
KVNCNLS

Thanks so much man. I literally just finished the CSS Grid course on FreeCodeCamp and your video helped me understand how these concepts are applied to a real website page.

Theo de Koning
Guest
Theo de Koning

1st I lost track by 08:25 because of main, section and header. Why those differences.
Then the coordination's of the grid like 3 / 2 / 4 / 3 that was simple: top left and bottom right in R(ow)/C(olumn) format. You lost there a lot of time.
Over all it was a very good lesson to keep bookmarked for later.

jalal jouid
Guest
jalal jouid

You are awesome bro 👍🏼

Miguel Nuñez
Guest
Miguel Nuñez

Man, you deserve those 500k! Great job! Thank you!

vikas singh
Guest
vikas singh

stop wasting our 1:35 min

AISHWARYA GUPTA
Guest
AISHWARYA GUPTA

very very nicely explained.

Akaigetsu
Guest
Akaigetsu

I normally make this kind of layout with flex by having 2 columns. Is there any added benefit for using Grid over Flex in this scenario? I usually tend to use Grid only when no other solution is possible (Masonry looking designs)

dh git
Guest
dh git

great thanks

Barun Kharel
Guest
Barun Kharel

The opening music way too long. It should have stopped right after the ad.

Anyway, nice content. I have not used grid till now. This video makes me wanna use grid in my next project.

Steven Luker
Guest
Steven Luker

Great stuff. Great job explaining. I have used grid-template-areas ever since learning CSS Grid. It's quicker. It's more visual if I see the areas all named and laid out in text format. And I am less likely to make as many mistakes. Could you do a video on doing a web page using CSS Grid for layout AND a framework like Bootstrap, Materialize, Bulma, etc. for styling elements (buttons, etc.) ASP.NET Core uses bootstrap out of the box. I think doing layouts would be much nicer (quicker, cleaner markup, easier to work with, easier to change). It would be easier… Read more »

Christian Kilian
Guest
Christian Kilian

Finally understand grid pretty well. I’m learning web development and none of the courses I’ve done cover the topic very well

satoribournemouth
Guest
satoribournemouth

Can you do grid Vs flexbox please