Note
Safari Books Online is an on-demand digital library that delivers expert content in both book and video form from the worlds leading authors in technology and business.
Technology professionals, software developers, web designers, and business and creative professionals use Safari Books Online as their primary resource for research, problem solving, learning, and certification training.
Safari Books Online offers a range of plans and pricing for enterprise, government, education, and individuals.
Members have access to thousands of books, training videos, and prepublication manuscripts in one fully searchable database from publishers like OReilly Media, Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit Press, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, Course Technology, and hundreds more. For more information about Safari Books Online, please visit us online.
How to Contact Us
Please address comments and questions concerning this book to the publisher:
- OReilly Media, Inc.
- 1005 Gravenstein Highway North
- Sebastopol, CA 95472
- 800-998-9938 (in the United States or Canada)
- 707-829-0515 (international or local)
- 707-829-0104 (fax)
We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://bit.ly/grid-layout-in-css.
To comment or ask technical questions about this book, send email to .
For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.
Find us on Facebook: http://facebook.com/oreilly
Follow us on Twitter: http://twitter.com/oreillymedia
Watch us on YouTube: http://www.youtube.com/oreillymedia
Chapter 1. Grid Layout
For as long as CSS has existedwhich is, believe it or not, two decadesnowits had a layout-shaped hole at its center. Weve bent otherfeatures to the purposes of layout, most notably float
and clear
,and generally hacked our way around that hole. Flexbox layout helped tofill it, but flexbox is really meant for only specific use cases, likenavigation bars (navbars).
Grid layout, by contrast, is a generalized layout system. With itsemphasis on rows and columns, it might at first feel like a return to tablelayoutand in certain ways thats not too far offbut there is far,far more to grid layout than table layout. Grid allows pieces of thedesign to be laid out independently of their document source order, andeven overlap pieces of the layout, if thats your wish. There arepowerfully flexible methods for defining repeating patterns of gridlines, attaching elements to those grid lines, and more. You can nestgrids inside grids, or for that matter, attach tables or flexboxcontainers to a grid. And much, much more.
In short, grid layout is the layout system weve long waited for.Theres a lot to learn, and perhaps even more to unlearn, as we leavebehind the clever hacks and workarounds that have gotten us through thepast 20 years.
Warning
Before we get started, a word of caution: as I write this in April 2016,grid layout is still in a bit of flux. We literally delayed publicationtwice due to changes in the specification and supporting browsers, andthere may be still more to come. This is why the book is only availableelectronically at this point. Therefore, keep in mind that while theoverall features and capabilities discussed in this book will almostcertainly remain, some details or even properties could change, orbe dropped. If you have a habit of checking for updates to your ebooks,this title might warrant more frequent checking. If you dont have thathabit, now is an excellent time to start.
Creating a Grid Container
The first step to creating a grid is defining a grid container. Thisis much like a containing block in positioning, or a flex container inflexible-box layout: a grid container is an element that defines a gridformatting context for its contents.
At this very basic level, grid layout is actually quite reminiscent offlexbox. For example, the child elements of a grid container becomegrid items, just as the child elements of a flex container become flexitems. The children of those child elements do not become gridelementsalthough any grid item can itself be made a grid container, andthus have its child elements become grid items to the nested grid. Its possible to nest grids inside grids, until its grids all the waydown. (Grid layout also has a separate concept of subgrids that isdistinct from nesting grid containers, but well get to that later.)