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

Cover Page....2 Table of Contents....3 Preface....4 Part 1–Working with CSS Grid....14 Chapter 1: Understanding the Basic Rules and Structures for CSS Grid....15 Technical requirements....16 Understanding the basic rules related to CSS Grid....16 Using grid templates....32 Grid flow....38 Understanding special grid-related units, keywords, and functions....45 Using shortcuts....56 Summary....61 Chapter 2: Project Introduction: What We’ll Work on and First Tasks....63 Technical requirements....63 Introducing Awesome Analytics – our gibberish analytics tool....64 Setting up Awesome Analytics locally....66 Receiving our first task – implementing the grids....67 Exploring the code of Awesome Analytics....69 Fixing Awesome Analytics’ layout problem – a possible solution....79 Summary....84 Chapter 3: Building Advanced Grid Layouts....86 Technical requirements....86 Understanding the row axis and column axis and how to influence them....87 Arranging grid items and grid cells with alignment and justification rules....89 Defining and using advanced grid templates....108 Creating subgrids....121 Masonry layouts....124 Practicing with Awesome Analytics....127 Summary....133 Part 2 – Understanding the CSS Grid Periphery....134 Chapter 4: Understanding and Creating Responsive and Fluid Grid Layouts....135 Technical requirements....135 Understanding the challenges of designing layouts....136 Understanding the difference between adaptive, responsive, and fluid layouts....146 Learning responsive layout best practices....151 Implementing responsive and fluid layouts with CSS Grid....157 Practicing responsive layouts with Awesome Analytics....168 Summary....179 Chapter 5: Implementing Layouts with Flexbox and CSS Grid....180 Technical requirements....181 Arranging media objects....182 Arranging teasers and card elements....186 Arranging forms and form elements....190 Building page layouts and partials....199 Practicing with Awesome Analytics....210 Summary....215 Chapter 6: Benefits of Grid Layouts and When Not to Use Them....217 Technical requirements....217 Cherishing the benefits of grid layouts....218 Understanding the drawbacks of grid layouts....223 Learning about some alternatives for grid layouts....233 A list to help us decide....237 Summary....238 Part 3 – Exploring the Wider Ecosystem....239 Chapter 7: Polyfilling CSS Grid’s Missing Features....240 Technical requirements....241 Understanding the tools to write a CSS polyfill from scratch....242 Creating a polyfill for subgrid....249 Creating a polyfill for masonry....257 Creating a polyfill for additional pseudo-classes....266 Animating grids....275 Understanding why we should not use polyfills....277 Summary....277 Chapter 8: Grids in the Wild – How Frameworks Implement Grids....279 Technical requirements....280 Learning how Tailwind implements grids....281 Learning how Bootstrap implements grids....290 Learning how Foundation implements grids....293 Learning how Bulma.io implements grids....298 Learning how UIkit implements grids....302 Learning how Pure.css implements grids....306 Learning how Tachyons implements grids....310 Learning how Cutestrap implements grids....311 Learning how other frameworks don’t implement grids....313 Practising Bootstrap and Tailwind frameworks with AwesomeAnalytics....314 Summary....322 Part 4 – A Quick Reference....324 Chapter 9: Quick Reference and Cheat Sheet....325 Technical requirements....325 Important terms and their definitions....326 CSS Grid attributes, values, functions, and units....329 CSS Grid recipes for everyday use cases....345 Grid design best practices and do’s and don’ts....354 A framework cheat sheet for the Holy grail layout....356 Summary....361 Index....362 Why subscribe?....374 Other Books You May Enjoy....376 Packt is searching for authors like you....379 Share your thoughts....379