CSS Grid Layout Training Course


CSS has changed substantially over the years. CSS Grid Layout is a two-dimensional grid layout system that allows developers to format web content into unique layouts.

This instructor-led, live training (online or onsite) is aimed at developers who wish to use CSS Grid Layout to architect flexible and responsive grid layouts that were previously difficult to do with legacy CSS layout features such as floats and Flexbox.

By the end of this training, participants will be able to:

  • Set up the necessary development environment to start styling a web application.
  • Use CSS Values to avoid rudimentary tasks, making coding easier.
  • Arrange web content into different layouts and styles.
  • Code, package, and test the CSS code.

Format of the Course

  • Interactive lecture and discussion.
  • Lots of exercises and practice.
  • Hands-on implementation in a live-lab environment.

Course Customization Options

  • To request a customized training for this course, please contact us to arrange.


  • CSS programming experience


  • Developers

Course Outline


  • The Growth of Web Styling

The Web Gridding Process

  • Streamlining grid designs
  • Processes and tools used for creating a web application layout
  • Coding, building, testing, and deploying

Preparing the Development Environment

  • Editors and/or IDEs (Integrated Development Enviroment)
  • Prepare the code repository (Github, GitLab, etc.)

Designing Grids for Your Web Application

  • Utilizing CSS values to define parent and child properties
  • Establishing a new grid formatting context for the grid’s content
  • Managing items by grid areas and names
  • Spanning items across rows and columns
  • Controlling the auto-placement algorithm for easy updates

Testing the Application

  • Refreshing the browser after code changes

Deploying the Application


Summary and Conclusion

Leave a Reply

Your email address will not be published. Required fields are marked *