Create A Dynamic Layout With CSS Grid Using Auto Fit And Minmax

Channel:
United States Coding Tech
Subscribers:
725,000
Published on ● Video Link: https://www.youtube.com/watch?v=5GGhOJWlVfM


Duration: 22:31
100,640 views
1,566

In this video, Kevin takes a look at creating a dynamic layout using CSS Grid. He explores how we can use repeat with auto-fit, as well as minmax, to help reduce the need for media queries.

The starting point: https://codepen.io/kevinpowell/pen/6a86e1c60bb6ef2224609a8db247bfc4 The finished version: https://codepen.io/kevinpowell/pen/0da463770f21e55ebc1e8ddfb923cfae

Check out Kevin's YouTube channel: https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw

Additional material for CSS learners:
https://amzn.to/2Tk6kBZ CSS: The Definitive Guide: Visual Presentation for the Web https://amzn.to/2FgQcMI A Smarter Way to Learn HTML & CSS: Learn it faster. Remember it longer
https://amzn.to/2Ffp1ll CSS in Depth
https://amzn.to/2FlKV6N CSS Secrets: Better Solutions to Everyday Web Design Problems



Other Videos By Coding Tech


2017-10-12THIS IS NATIVESCRIPT!
2017-10-10ReactJS - Django App Development Workshop
2017-10-08Discovering JavaScript
2017-10-07Toward A Better Front End Architecture: ELM
2017-10-06Building UI At Enterprise Scale With Web Components
2017-10-04The Reusable JavaScript REVOLUTION
2017-09-30Don’t Be Scared Of Functional Programming
2017-09-29Creating Awesome 3D Animations With Python In Blender
2017-09-28Build React Native Chat App In 30 Minutes
2017-09-25Fun and Games With NodeJS
2017-09-24Create A Dynamic Layout With CSS Grid Using Auto Fit And Minmax
2017-09-23Worst JavaScript Flaws That Hackers Love To Abuse
2017-09-19Code Refactoring: Learn Code Smells And Level Up Your Game!
2017-09-18Functional Programming Basics In ES6
2017-09-17BETTER CODE
2017-09-15NODE JS is EVERYWHERE
2017-09-11Answering Tricky JS Interview Questions
2017-09-10LAMBDA Functions: Powerful And Elegant Abstractions
2017-09-07Things I Was Unprepared For As A Lead Developer
2017-09-06The Frontend Is A Full Stack
2017-09-04VS Code: Supercharge Your JavaScript Debugging Workflow


Tags:
css
css grid
grid layout
front-end
web development
dynamic layout
programming
css tutorial
css grid layout