Instructor: Coding2GO |
Runtime: 21:16 mins |
Students / Views: 215,207
👉 Check out Miro today – the best visual collaboration tool for devs and teams: http://miro.pxf.io/3JK2ok
Learn how to create responsive websites with this CSS Grid Beginner Course. display: grid; explained in 20 minutes by Coding2GO.
*Learn More with My Courses*
👉 Get My JavaScript Course: https://www.udemy.com/course/javascript-course-coding2go/?referralCode=CF16EB9F6548CB416253
👉 HTML & CSS Complete Course: https://www.udemy.com/course/learn-html-and-css-in-7-days-web-developer-bootcamp/?couponCode=CODING2GO
In this CSS Grid Crash Course for beginners, you are going to learn about responsive web design by getting CSS Grid explained. How to use display: grid plays a major role in building flexible layouts, aligning elements, and making sure your website looks great on all screen sizes. You’ll learn everything from simple grid structures to more advanced tricks like grid-template-areas, repeat(), and fraction units.
*Timestamps*
00:00 Grid Basics
03:42 Responsive Columns & Fractions
05:05 Alignment (How to center a grid)
06:32 Implicit Grids (auto-columns, auto-rows, auto-flow)
08:10 Create Bento Grids with grid-template-areas
14:10 Grid Stacking & Overlapping Grid-Items
17:50 Grid Wrapping with repeat(), auto-fit & minmax()
👉 Check out our website for more: https://coding2go.com
Key Concepts:
CSS Grid Basics: Use display: grid; to create responsive two-dimensional layouts
Grid Rows and Columns: Learn how to define flexible rows and columns using grid-template-columns and grid-template-rows
Fraction Units (fr): Make your layout adapt to screen size using fluid measurements
Grid Gap: Add spacing between grid items with gap
Grid Item Placement: Use grid-column, grid-row, grid-area to position elements
Grid Template Areas: Name your layout sections for readable, structured designs
Implicit vs Explicit Grids: Understand how the browser auto-creates rows and columns
Responsive Design: Use media queries with CSS Grid for fully responsive websites
Learn about grid stacking and bento grids
Learn grid wrapping and create responsive grids using repeat auto-fit minmax and fractions
Topics of this video:
CSS, CSS Grid, display grid, html, css tutorial, responsive web design, css layout, grid layout, grid-template-columns, grid-template-rows, grid-gap, grid-column, grid-row, grid-area, css grid for beginners, beginner tutorial, explained for beginners, beginner friendly, css grid course, css grid crash course, css grid tutorial, how to use css grid, responsive layout, make website responsive
This video was sponsored by Miro
Key Highlights & Overview:
Learning <strong>Css Grid Trick</strong> requires clear step-by-step guidance and practical hands-on visual demonstrations. Follow along with top-rated video tutorials from industry experts today on <strong>TutorTube</strong>.
