Grid Layout in CSS: Interface Layout for the Web

by Eric A. Meyer

CSS has had a layout-shaped hole at its center since the beginning. Designers have bent features such as float and clear to help fill that hole, but nothing has quite done the job. Now that’s about to change. With this concise guide, you’ll learn how to use CSS grid layout, a generalized system that lets you lay out pieces of your design independent of their document source order and with full awareness of the overall design.

Short and deep, this book is an excerpt from the upcoming fourth edition of The Definitive Guide. When you purchase either the print or the ebook edition of Grid Layout in CSS, you’ll receive a discount on the entire Definitive Guide once it’s released. Why wait? Learn how to make your web pages come alive today.

Explore the differences between grid boxes and block containersCreate block-level grids, inline grids, and even nest grids inside gridsLearn best practices for attaching elements to your layout, using explicitly defined grid lines or grid areaUnderstand how the implicit grid automatically adjusts for oversized elementsCreate gutters between grid elements, and align and justify individual itemsEric A. Meyer is an author, speaker, blogger, sometime teacher, and co-founder of An Event Apart. He’s a two-decade veteran of the Web and web standards, a past member of the W3C’s Cascading Style Sheets Working Group, and the author of O’Reilly’s The Definitive Guide.

119 pages, Kindle Edition

Published April 18, 2016

About the author

Eric A. Meyer is an American web design consultant and author. He is best known for his advocacy work on behalf of web standards, most notably CSS (Cascading Style Sheets), a technique for managing how HTML is displayed. Meyer has written a number of books and articles on CSS and given many presentations promoting its use. Eric currently works for Igalia.

Reviews

[Mariusz Bartosik · Rating 4 out of 5]

This book is for front-end developers and web designers who want to use new techniques and already know the basics of CSS.

Eric A. Meyer provided a really clear explanation of everything that you have to know about using grid layouts in CSS. Starting from creating a grid container, through attaching elements to the grid, and ending with advanced cases of layering and ordering. Each topic is illustrated with an example code.

More about this book and what you can learn: https://mariuszbartosik.com/books/gri...

[Stefano Zanella · Rating 5 out of 5]

Short, comprehensive, witty at times, easy to read and understand. I’d recommend to anyone looking to brush up their CSS skills and leave behind legacy and enter the 21st year of the 21st century. For me, grid layout and flexbox are igniting again my interest for front ends after almost a decade of hair-pulling pain, and this book has been a great vehicle to get that interest sharpened.