Mastering CSS Grid, published by Packt

This is the code repository for Mastering CSS Grid, published by Packt.

A comprehensive and practical guide to creating beautiful layouts with CSS Grid

This book is for web developers and designers who want to learn CSS Grid and improve their layout design skills. This book will also be a valuable resource for CSS developers seeking to advance their skills to the most proficient level. Additionally, this book will serve as an excellent guide for those who wish to expand their toolset to include flexbox and grids.

This book covers the following exciting features:

• Enhance your CSS Grid skills by mastering both its fundamental and advanced concepts.
• Combine flexbox and CSS Grid seamlessly to produce stunning and responsive page layouts.
• Discover the potential of complex grid layouts to improve your next project.
• Examine how frameworks utilize CSS Grid to create reusable components.
• Leverage the benefits of grid-based layouts to create visually appealing websites.
• Create custom polyfills and learn when to use grid layout.

If you feel this book is for you, get your copy today!

All of the code is organized into folders. For example, chapter1.

The code will look like the following:

.container {
  display: grid;
  grid-template-areas:
    "header header header header"
    "sidebar content content content"
    «sidebar content content content»
    «sidebar content content content»
    «sidebar content content content»
    «footer footer footer footer»
;
   grid-template-rows: 200px 1fr 1fr 1fr 1fr 200px;
   grid-template-columns: 150px 1fr 1fr 1fr;
}

Following is what you need for this book:

CSS Grid has revolutionized web design by filling a long-existing gap in creating real, dynamic grids on the web. This book will help you grasp these CSS Grid concepts in a step-by-step way, empowering you with the knowledge and skills needed to design beautiful and responsive grid-based layouts for your web projects.

With the following software and hardware list you can run all code files present in the book (Chapter 1-9).

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. Click here to download it.

• Page 18 (Code block, line 6,7): << >> should be " "
• Page 20 ( Code block, line 6,7,8,9): << >> should be " "

• Responsive Web Design with HTML5 and CSS [Packt] [Amazon]

• The HTML and CSS Workshop [Packt] [Amazon]

Pascal Thormeier born in 1990, is a senior software developer at Liip AG, a leading Swiss web agency, and he considers himself at home in both the frontend and backend. Initially programming in PHP as his first language in the early 2000s, Pascal has experience in many technologies, languages, and frameworks, such as Java, Python, NodeJS, and Vue. After 4 years of part-time studying, Pascal received a bachelor’s degree in computer science with a specialization in design and management from the University of Applied Sciences and Arts Northwestern Switzerland in 2020, and he started to write a tech blog on dev.to shortly after. He has since published over 75 articles and an online course on Vue.