OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.
Pluralsight logo

Creating Layouts with CSS Grid

Matt Henry

Coding web layouts has never been easy until now. This course will teach you CSS Grid, a technology to define rational layouts for your websites that is finally ready to go mainstream.

Read more

Coding web layouts has never been easy until now. This course will teach you CSS Grid, a technology to define rational layouts for your websites that is finally ready to go mainstream.

Layouts in CSS have always depended on hacks. Getting the look you want has meant pushing CSS to its limits using floats, HTML, and positioning tricks in unconventional ways. In this course, Creating Layouts with CSS Grid, you’ll learn how to use the brand new CSS Grid system to solve layout problems once and for all. First, you’ll discover why CSS Grid is a better way to do layout. Next, you’ll get up and running with the minimum necessary code to start using CSS Grid. Finally, you’ll explore the CSS Grid specification thoroughly, learning how to create any layout you can dream of. When you’re finished with this course, you’ll have a solid understanding of this critical technology needed to create modern, robust, and responsive layouts for the web.

Enroll now

What's inside

Syllabus

Course Overview
Meet CSS Grid
Up and Running with CSS Grid
Defining Grids: In-depth
Read more
Positioning Items: In-depth
Advanced CSS Grid

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Emphasizes critical technology to create layouts for modern, robust, and responsive web designs
Taught by an industry expert who is recognized for their experience in developing CSS Grid
Covers CSS Grid thoroughly, exploring the specification in-depth to equip learners with a solid understanding of the technology
Develops skills and knowledge that are highly relevant to industry
Takes a creative approach to a longstanding topic, leveraging new technology to enhance web layout design

Save this course

Save Creating Layouts with CSS Grid to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Creating Layouts with CSS Grid with these activities:
Review HTML and CSS fundamentals
Reviewing HTML and CSS fundamentals will reinforce your understanding of the building blocks upon which CSS Grid is based, enhancing your ability to work with it effectively.
Browse courses on HTML
Show steps
  • Go through your HTML and CSS notes
  • Take online quizzes or practice exercises
Create a CSS framework template
This activity will help you refresh your knowledge of CSS.
Show steps
  • Download a CSS framework of your choice from online resources.
  • Open the downloaded framework and review the code structure.
  • Create a new CSS document and implement the structure and styles from the framework.
  • Experiment with customizing the framework by adding your own styles.
Follow tutorial on CSS Grid
This activity will help you to understand the basics of CSS Grid.
Browse courses on CSS Grid
Show steps
  • Find a tutorial online about CSS Grid.
  • Follow the instructions in the tutorial.
Ten other activities
Expand to see all activities and additional details
Show all 13 activities
Practice using CSS Grid
This activity will help you to practice using CSS Grid.
Browse courses on CSS Grid
Show steps
  • Create a new HTML document.
  • Add a CSS stylesheet to the HTML document.
  • Use CSS Grid to style the HTML document.
Join an online study group on CSS Grid
This activity will help you to learn from and collaborate with other students who are also learning about CSS Grid.
Browse courses on CSS Grid
Show steps
  • Find an online study group on CSS Grid.
  • Join the study group.
  • Participate in the study group discussions.
Follow tutorials on implementing CSS Grid
Following some tutorials will help you gain a better understanding of the nuances of CSS Grid and enhance your skills in using it.
Browse courses on CSS Grid
Show steps
  • Find a tutorial on implementing CSS Grid
  • Follow the tutorial step-by-step
Review and discuss CSS Grid code with peers
Engaging in peer review sessions will expose you to different perspectives and approaches, promoting a deeper understanding of CSS Grid.
Browse courses on CSS Grid
Show steps
  • Find a peer who is also learning CSS Grid
  • Share your code with each other
  • Provide feedback on each other's code
Practice CSS Grid layout techniques
Completing this practice will help you develop stronger skills in using CSS Grid to create layouts.
Browse courses on CSS Grid
Show steps
  • Create a simple layout using CSS Grid
  • Experiment with different grid properties
  • Create a more complex layout using CSS Grid
Custom website layout using CSS Grid
This activity will help you to apply your knowledge of CSS Grid to create a custom website layout.
Browse courses on CSS Grid
Show steps
  • Plan the layout of your website.
  • Create a HTML document for your website.
  • Add a CSS stylesheet to your HTML document.
  • Use CSS Grid to style your website.
  • Test your website in different browsers.
Read 'CSS Grid Layout' by Rachel Andrew
This book will provide comprehensive insights into CSS Grid, empowering you with a deep understanding of its capabilities and best practices, enabling you to create sophisticated layouts with precision.
View The New CSS Layout on Amazon
Show steps
  • Read the book thoroughly
  • Take notes and highlight important concepts
Build a CSS Grid-based website
Building a website using CSS Grid will give you a chance to apply your knowledge in a practical manner, enhancing your proficiency and understanding of how CSS Grid can be effectively utilized.
Browse courses on CSS Grid
Show steps
  • Implement CSS Grid to create the layout
  • Plan the structure and layout of your website
  • Add content and style to your website
Create a CSS Grid-based portfolio
Building a portfolio using CSS Grid will allow you to showcase your skills and demonstrate your mastery of this powerful layout technique.
Browse courses on CSS Grid
Show steps
  • Gather your projects and select those you want to showcase
  • Design and implement a CSS Grid-based layout for your portfolio
  • Add your projects to the portfolio and provide descriptions
  • Publish your portfolio online
Contribute to open-source projects using CSS Grid
Contributing to open-source projects using CSS Grid will allow you to gain experience working on real-world projects and collaborating with others, further enhancing your skills.
Browse courses on CSS Grid
Show steps
  • Find open-source projects that use CSS Grid
  • Identify areas where you can contribute
  • Make your contributions and submit pull requests

Career center

Learners who complete Creating Layouts with CSS Grid will develop knowledge and skills that may be useful to these careers:
Front-End Developer
Front-End Developers are responsible for the design and implementation of the user interface of a website or web application. They work with a variety of programming languages and technologies, including CSS Grid. This course can help Front-End Developers learn how to use CSS Grid to create more efficient and responsive layouts for their websites.
See salaries and explore the career path for Front-End Developer
User Experience Designer
User Experience Designers are responsible for designing and developing user interfaces for websites and web applications. They work with a variety of programming languages and technologies, including CSS Grid. This course can help User Experience Designers learn how to use CSS Grid to create more efficient and responsive layouts for their websites.
See salaries and explore the career path for User Experience Designer
Web Developer
Web Developers are responsible for designing and developing websites and web applications. They work with a variety of programming languages and technologies, including CSS Grid. This course can help Web Developers learn how to use CSS Grid to create more efficient and responsive layouts for their websites.
See salaries and explore the career path for Web Developer
Software Engineer
Software Engineers are responsible for designing, developing, and maintaining software applications. They work with a variety of programming languages and technologies, including CSS Grid. This course can help Software Engineers learn how to use CSS Grid to create more efficient and responsive layouts for their software applications.
See salaries and explore the career path for Software Engineer
Mobile App Developer
Mobile App Developers are responsible for designing and developing mobile applications. They work with a variety of programming languages and technologies, including CSS Grid. This course can help Mobile App Developers learn how to use CSS Grid to create more efficient and responsive layouts for their mobile applications.
See salaries and explore the career path for Mobile App Developer
UX Designer
UX Designers are responsible for designing the user experience for websites and web applications. They work with a variety of programming languages and technologies, including CSS Grid. This course can help UX Designers learn how to use CSS Grid to create more efficient and responsive layouts for their websites.
See salaries and explore the career path for UX Designer
Technical Writer
Technical Writers are responsible for writing documentation for software and hardware products. They work with a variety of programming languages and technologies, including CSS Grid. This course may be useful for Technical Writers who want to learn how to use CSS Grid to create more efficient and responsive layouts for their documentation.
See salaries and explore the career path for Technical Writer
Graphic designer
Graphic Designers are responsible for creating visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers. They may create visual concepts by using a variety of media and methods. This course may be useful for Graphic Designers who want to learn how to use CSS Grid to create more efficient and responsive layouts for their designs.
See salaries and explore the career path for Graphic designer
Web Designer
Web Designers are responsible for designing the look and feel of websites. They work with a variety of programming languages and technologies, including CSS Grid. This course may be useful for Web Designers who want to learn how to use CSS Grid to create more efficient and responsive layouts for their websites.
See salaries and explore the career path for Web Designer
Information Architect
Information Architects are responsible for designing and organizing the content of websites and web applications. They work with a variety of programming languages and technologies, including CSS Grid. This course may be useful for Information Architects who want to learn how to use CSS Grid to create more efficient and responsive layouts for their websites.
See salaries and explore the career path for Information Architect
Business Analyst
Business Analysts are responsible for analyzing and documenting business processes. They work with a variety of programming languages and technologies, including CSS Grid. This course may be useful for Business Analysts who want to learn how to use CSS Grid to create more efficient and responsive layouts for their business process documentation.
See salaries and explore the career path for Business Analyst
Product Manager
Product Managers are responsible for defining the vision and roadmap for a product. They work with a variety of programming languages and technologies, including CSS Grid. This course may be useful for Product Managers who want to learn how to use CSS Grid to create more efficient and responsive layouts for their product roadmaps.
See salaries and explore the career path for Product Manager
Project Manager
Project Managers are responsible for planning, organizing, and managing projects. They work with a variety of programming languages and technologies, including CSS Grid. This course may be useful for Project Managers who want to learn how to use CSS Grid to create more efficient and responsive layouts for their project plans.
See salaries and explore the career path for Project Manager
Data Analyst
Data Analysts are responsible for collecting, cleaning, and analyzing data. They work with a variety of programming languages and technologies, including CSS Grid. This course may be useful for Data Analysts who want to learn how to use CSS Grid to create more efficient and responsive layouts for their data visualizations.
See salaries and explore the career path for Data Analyst
Systems Analyst
Systems Analysts are responsible for analyzing and designing business systems. They work with a variety of programming languages and technologies, including CSS Grid. This course may be useful for Systems Analysts who want to learn how to use CSS Grid to create more efficient and responsive layouts for their business systems.
See salaries and explore the career path for Systems Analyst

Reading list

We've selected 12 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Creating Layouts with CSS Grid.
Cover image
The New CSS Layout
Save
Provides a comprehensive overview of CSS Grid Layout, covering the basics of the layout system, as well as more advanced topics such as auto-placement and named lines. It is an excellent resource for anyone who wants to learn more about CSS Grid Layout.
The New CSS Layout
Paperback
Check
The New CSS Layout
Kindle Edition
Check
Cover image
The 2022 Web Almanac
Save
Provides a practical guide to using CSS Grid Layout to create responsive and flexible layouts. It great resource for anyone who wants to learn how to use CSS Grid Layout to create complex and responsive layouts.
The 2022 Web Almanac
Paperback
Check
The 2022 Web Almanac
Kindle Edition
Check
Cover image
CSS Secrets
Save
Offering a deeper dive into the technical aspects of CSS, this book explores advanced techniques and concepts, providing additional depth to the course's coverage of CSS Grid and related topics.
CSS Secrets
Paperback
Check
CSS Secrets
Kindle Edition
Check
Cover image
Dreamweaver CC: The Missing Manual
Save
Serving as a comprehensive reference guide, this book provides detailed explanations of CSS concepts, including properties, selectors, and units, complementing the course's emphasis on practical application.
Dreamweaver CC: The Missing Manual: Covers 2014...
Paperback
$$
Dreamweaver CC: The Missing Manual: Covers 2014...
Kindle Edition
$$
Cover image
The Book of CSS3, 2nd Edition
Save
Serving as a comprehensive reference for CSS3, this book covers advanced CSS3 techniques and features, offering additional depth and breadth to the concepts introduced in the course.
The Book of CSS3, 2nd Edition: A Developer's Guide...
Paperback
$$
The Book of CSS3, 2nd Edition: A Developer's Guide...
Kindle Edition
$$
Cover image
Responsive Web Design with HTML5 and CSS
Save
Extending the course's focus on layout, this book explores responsive web design techniques using HTML5 and CSS3, enabling readers to create layouts that adapt to different devices and screen sizes.
Responsive Web Design with HTML5 and CSS - Fourth...
Paperback
$$
Responsive Web Design with HTML5 and CSS: Develop...
Paperback
$$
Responsive Web Design with HTML5 and CSS: Build...
Kindle Edition
$$
Responsive Web Design with HTML5 and CSS: Develop...
Kindle Edition
$$
Cover image
Flexible Web Design
Save
Provides a comprehensive guide to using CSS Grid Layout to create responsive and flexible layouts. It great resource for anyone who wants to learn how to use CSS Grid Layout to create complex and responsive layouts.
Flexible Web Design: Creating Liquid and Elastic...
Paperback
$$$$
Flexible Web Design byGillenwater
Paperback
$$$$
Flexible Web Design: Creating Liquid and Elastic...
Kindle Edition
$$
Cover image
Adaptive Web Design
Save
Expanding the course's focus on responsive layout techniques, this book explores adaptive web design strategies and best practices, enabling readers to create layouts that adapt to a wider range of devices and user contexts.
Adaptive Web Design
Paperback
Check
Adaptive Web Design
Kindle Edition
Check
Cover image
Designing With Web Standards, 3/E
Save
Provides a foundational understanding of web standards and best practices, complementing the course's focus on modern layout techniques and reinforcing the importance of accessibility and cross-browser compatibility.
Designing With Web Standards, 3/E
Paperback
Check
Designing With Web Standards, 3/E
Kindle Edition
Check
Cover image
Web Accessibility
Save
Providing a historical and theoretical perspective on grid systems in web design, this book offers insights into the evolution of layout techniques and their impact on the development of the web.
Web Accessibility
Paperback
Check
Web Accessibility
Kindle Edition
Check
Cover image
Dreamweaver CC: The Missing Manual
Save
Provides a beginner-friendly guide to CSS Grid Layout. It great resource for anyone who wants to get started with CSS Grid Layout.
Dreamweaver CC: The Missing Manual
Paperback
Check
Dreamweaver CC: The Missing Manual
Kindle Edition
Check
Cover image
Designing Web Interfaces
Save
Offering insights into the principles of user interface design, this book complements the course's focus on layout by exploring user-centered design principles and best practices for creating intuitive and usable interfaces.
Designing Web Interfaces: Principles and Patterns...
Kindle Edition
$$

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Here are nine courses similar to Creating Layouts with CSS Grid.
Mastering CSS Grid 2023 - With 3 cool projects
Most relevant
Learn CSS Grid
Most relevant
HTML and CSS in depth
Most relevant
Creating Layouts with CSS
Most relevant
Advanced CSS and Sass: Flexbox, Grid, Animations and More!
Most relevant
CSS, Website Layout, Website Components
Most relevant
Build a Responsive Layout with CSS Grid
Most relevant
Creating Responsive Pages with CSS FlexBox
Most relevant
CSS Bootcamp - Master CSS (CSS Grid / CSS Flexbox)
Most relevant
Course image
Time
102 hours
Level
Intermediate
Via
Pluralsight
Instructor
Matt Henry
Language
English
Good to know
Emphasizes critical technology to create layouts for modern, robust, and responsive web designs
Taught by an industry expert who is recognized for their experience in developing CSS Grid
Covers CSS Grid thoroughly, exploring the specification in-depth to equip learners with a solid understanding of the technology
Develops skills and knowledge that are highly relevant to industry
Takes a creative approach to a longstanding topic, leveraging new technology to enhance web layout design
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser