Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Online Business Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development CSS Grid

Mastering CSS Grid 2021 - With 3 cool projects

The future of layouts. It's like Flexbox, but dialled up to eleven
Rating: 4.7 out of 54.7 (204 ratings)
27,553 students
Created by Daryl Duckmanton
Last updated 10/2019
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • How to implement responsive layouts using CSS Grid
  • How to build regular layouts in CSS Grid
  • All properties that are part of the CSS Grid Specification
  • How to build commonly used sites such as YouTube using CSS Grid

Course content

13 sections • 147 lectures • 17h 15m total length

  • Preview09:23
  • Preview04:58
  • Preview03:23
  • Preview13:58

  • Preview02:28
  • Defining Rows and Columns
    08:38
  • The grid property
    01:44
  • Fixed and Percentage Track Sizing
    03:27
  • Track Sizing based on Font Size
    03:58
  • Track Sizing based on Viewport
    07:59
  • Auto Track Sizes
    05:46
  • The Fraction (fr) Unit
    Preview10:14
  • Fractions vs Auto
    02:45
  • The minmax function
    10:00
  • Minmax function gotchas
    07:05
  • Understanding max-content and min-content
    05:16
  • The fit-content function
    05:49
  • The repeat function
    06:12
  • Managing Grid Gaps
    05:43
  • Grid Gap Updates!!!
    00:28
  • Nested grids
    01:16
  • A note on nesting
    00:25

  • Reordering Grid Items
    07:00
  • Preview07:55
  • Moving Grid Items to different rows
    07:06
  • Moving Grid Items to non adjacent cells
    09:05
  • Grid Item spanning basics
    09:58
  • The span keyword
    07:58
  • Grid Item spanning gotchas
    04:07
  • Naming Grid Lines
    05:49
  • Spanning Grid Items based on line names
    07:19
  • Using multiple line names
    04:58
  • Lines names and the repeat function
    04:04
  • The grid-column property
    08:02
  • The grid-row property
    05:18
  • Preview10:48
  • Spanning Grid Items using the grid-area property
    06:25
  • The grid property reviewed
    04:53

  • Aligning Row Tracks
    06:08
  • Aligning Column Tracks
    02:29
  • The place-content property
    04:56
  • Vertically Aligning Grid Items
    03:29
  • Horizontally Aligning Grid Items
    02:28
  • The place-items property
    03:41
  • Vertically Aligning an Individual Grid Item
    02:05
  • Horizontally Aligning an Individual Grid Item
    01:37
  • The place-self property
    02:42

  • Preview11:52
  • Setting viewport for mobile and tablet devices
    03:27
  • Positioning Grid Items using areas
    Preview08:41
  • Spanning Grid Items using areas
    08:03
  • Defining empty grid cells
    01:38
  • Gotchas with grid-template-areas
    02:18
  • Building responsive grids without media queries
    09:07
  • The grid property reviewed again
    08:02

  • Implicit vs explicit grids
    06:01
  • An introduction to the Autoplacement Algorithm
    02:47
  • Understanding Flow
    07:13
  • Controlling Flow
    07:50
  • Understanding order-modified document order
    04:27
  • Understanding locking
    12:21
  • Preview12:31
  • Locking and responsive web design
    09:51
  • Locking and responsive web design in action
    07:16
  • Understanding Grid Spans
    04:29
  • Grid Spans in action
    08:10
  • Understanding packing
    05:51
  • Packing in action
    03:36
  • Preview14:47
  • Bringing it all together part 2
    14:59
  • The grid property and Autoplacement part 1
    10:44
  • The grid property and Autoplacement part 2
    10:09

  • The grid-template property
    06:50
  • Absolute positioning
    05:55
  • Animating grids
    05:10
  • Simplifying Flexbox layouts with CSS Grid
    11:32
  • More simplifying Flexbox layouts
    11:44
  • When to use Flexbox over CSS Grid
    13:13
  • A note of grid item sizing vs flex item sizing
    00:24
  • Preview13:19

  • Building a 4 column layout
    04:15
  • Building a sidebar
    03:43
  • Vertically aligning text
    03:04
  • Centering a modal dialog
    04:39
  • Creating a sticky footer
    04:31
  • Basic form formatting
    12:17

  • Preview11:43
  • The Media Objects layout
    09:19
  • A Viewport Friendly Image Gallery
    06:27
  • Another Viewport Friendly Image Gallery
    05:31
  • Animating a Sidebar
    05:51
  • A Monthly Calendar
    12:14
  • A Newspaper Cover
    13:06
  • A Twitter Responsive Layout
    20:34
  • A Responsive Movie Gallery
    12:03
  • A Responsive Movie Gallery Continued
    10:23
  • A Responsive Movie Gallery Finale
    08:54

  • Preview02:03
  • Preview15:50
  • Building the search conversation section
    04:30
  • Building the add conversation section
    05:31
  • Building the chat title section
    05:28
  • Building the chat form section
    06:43
  • Building an individual conversation item
    11:01
  • Fixing conversation item sizing issues
    05:50
  • Adding more conversation items
    03:04
  • Creating some initial chat messages
    08:14
  • Sizing and aligning chat messages
    06:14
  • Adding chat profile pictures
    07:22
  • Adding the finishing touches
    01:23

Requirements

  • Some knowledge of CSS and HTML
  • Flexbox is optional but preferred

Description

CSS Grid is a relatively new and unused concept to CSS. It's very important these days that our layouts are simple to maintain, and easy to adjust based on the dimensions of our device. CSS grid simplifies this process over other existing strategies.

In this course we take you deep into how to build a variety of different layouts in CSS Grid. We cover the following:-

  1. All the properties in CSS Grid, how they work, and any gotchas that you may not be aware of when using them.

  2. Alignment and how it works in CSS Grid, including the alignment of tracks and grid items at the grid container level. We also show you how to override alignment at the grid item level.

  3. The basics of responsive web design, such as media queries and how they work with mobile / tablet etc.

  4. Grid areas and how it helps simplify responsive web design

  5. The concept of implicit and explicit grids and what the differences are

  6. A deep look into the Autoplacement algorithm

  7. Animation at a high level and what works currently with CSS Grid

  8. How to convert some layouts in Flexbox to use CSS Grid instead

  9. When to use Flexbox over CSS Grid

Once we cover all of these concepts, we then go about showing you some basic layout problems and how they can be solved. This includes:-

  1. Column based layout

  2. Basic Sidebar layout

  3. Vertical Text alignment

  4. Modal alignment

  5. Stick footer layout

  6. Formatting form fields

And hopefully in future much more. We then look at some advance layout topics such as:-

  1. The Holygrail layout

  2. The Media Objects layout

  3. A Viewport Friendly Image Gallery

  4. A Responsive Image Gallery

  5. An Animated Sidebar

  6. A Monthly Calendar layout

  7. A Newspaper Cover layout

  8. A Responsive Twitter Clone Layout

  9. A Responsive Movie Gallery

Then if you haven't had enough, we have 3 real life application examples that will give you the experience you need. They are:-

  1. A Chat UI interface

  2. An Uber Eats Clone Responsive Application

  3. A YouTube Clone Responsive Application

Who this course is for:

  • Web Developers
  • Web Designers
  • User Experience Designers
  • Front End Developers
  • Full Stack Developers

Featured review

Francis Joaquin
Francis Joaquin
21 courses
12 reviews
Rating: 5.0 out of 510 months ago
This course is great if you want to learn CSS Grid inside and out. Highly recommended. Distinctive Pros: Bite sized lessons. Easy to find a lesson you may need to go over again. Truly in-depth. The option is there to learn all the syntax. Real-world application examples

Instructor

Daryl Duckmanton
Full Stack Software Developer
Daryl Duckmanton
  • 4.6 Instructor Rating
  • 450 Reviews
  • 45,153 Students
  • 3 Courses

I am a full stack web developer, who has been developing websites for 13 years, both from a back and front end. I have been working in the areas of HTML5, CSS3, Javascript, Typescript, .NET, Windows Azure, AWS and Angular / React in recent years.

I love to teach and I also teach a lot on YouTube as well. I have videos available in the Angular / React and AWS spaces.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.