CSS GRID With Flexbox | Beginner to Pro Tutorial

Today we go in depth of CSS Layouts using CSS Grid and Flexbox. We talk about how you can use grid and flex ox together to create great layouts. Go from Zero to Hero with this how to code tutorial.

Day 62 #100DaysOfCode

// MY GEAR FOR CODING AND YOUTUBE

All of these products I own and have tested!

Important Links

We cover:
CSS Animations
JavaScript Events
JavaScript DOM Manipulation
JSON Data Structure
& MORE!

If you read down here then HELLO! :)

#webdevelopment #animations #javascript

[likboss]

Timestamps for meself later:


3:00 grid overview 10:00 flex description

[simonkalu]

Thanks for making this tutorial. I made this whole 1 and 2 dimension so clear now that I am very confident to start a project with flex and grid. Each section was crystal clear

[mustaphasodruldeen]

i do full stack but havent been keeping up with the frontend for a while, i was stucked with bootstrap until i watched this video, gives me a flexgrid god feeling. Thank Tyler

[sylvanusedi]

This was the first CSS GRID tutorial that explained clearly how to use grid that i have found. thank you

[kaszapnagypeter]

"Well, don't worry you not the only one"😂 Great video anyway!

[Mrbhuriya]

great project buddy. i download your videos for study with this later, (no fast internet for live). so ur videos is great. as you are

[UnchartedWorlds]

Rock & Roll! Tyler appreciate this tutorial. Gonna use some of the stuff I learn here in my project.

[Balaji-gnug]

If anyone uses a card inside the column, use the below style; please adjust the minimum and maximum value to meet your requirements. This code will adjust the card width based on the window screen. It is very useful instead of using media queries for all the screen widths.

grid-template-columns: repeat(auto-fit, minMax(340px, 1fr));

[escaparate_argentina]

Hello from Uruguay. Thanks for the tutorial.

[jjjessee]

Very easy to follow your instruction. Thanks.

[namrok]

Great, thanks Tyler. Also didn't know you could calculate directly in spotlight, so it's a double win for me !

[Dexter-rcfn]

thank you so much for this video it helped me a lot learning about grid. I was using flexbox in de beginning but grid is so much better and I don't have to have a degree in math to align all the items perfect 😂.

[barnabas.csermely]

Amazing videos, never get bored of them. <3

[aleksalukic]

Dude you helped me so much! I escaped the tutorial purgatory

[justanaverageperson]

Just starting but you can change Flexbox's order from the css. I just watched a 2 year old tut that did that.

[sarrii]

thank you very much for the video Tyler. When to use grid-area vs grid-column-start / grid-column-end etc... ?? Grid area looks much easier..Thank you !

[noobedition]

that was a very helpful video, I really appreciate your effort!

[Itech]

har is: &:nth-chid(1), i can understand that you pointing out the first box etc but what about the syntax, how can I know how to write this like that with & ? is there any more beginner friendly syntax or is this how you write this, just so I know. thank you!

[dodgycable]

Is your file available to download anywhere? I'm trying to follow along the tutorial but the boxes of the grid aren't being affected by the css, it's not clear why it's not working.

[bollvigblack]

thank you. @Tyler Potts im having hard time positioning elements with Flex Grid ect. putting square right for example or putting some images under perfectly or even writings, can u make tutorial how to position elements ? and they have to be responsive also and work for all screens