Contents
Preface iv
Chapter 1 An Introduction to the CSS Grid Layout Module 1
Chapter 2 Seven Ways You Can Place Elements Using CSS Grid Layout 16
Chapter 3 How to Order and Align Items in Grid Layout 31
Chapter 4 A Step by Step Guide to the Auto- Placement Algorithm in CSS Grid 40
Chapter 5 How I Built a Pure CSS Crossword Puzzle 54
About SitePoint
SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals. Visit sitepoint.com/ to access our blogs, books, newsletters, articles, and community forums. You’ll find a stack of information on JavaScript, PHP, design , and more.
Preface
Layout in CSS has always been a tricky task: hacking solutions using positioning, floats, and the one-dimensional flexbox has never been very satisfactory.
Fortunately, there is a new tool to add to our arsenal: CSS Grid Layout>. It is an incredibly powerful layout system that allows us to design pages using a twodimensional grid - offering the kind of fine-grained layout control that print designers take for granted!
Grid Layout’s been in development for a while, but has recently been made a W3C candidate recommendation and has been added to most of the major browsers>, so is ready for prime time.
This short selection of tutorials, hand-picked from SitePoint’s HTML & CSS channel, will get you up and running with Grid Layout and using it in your own sites in no time.
An Introduction to the CSS Grid Layout Module
by Ahmad Ajmi
As web applications become more and more complex, we need a more natural way to do advanced layouts easily without hacky solutions that use floats and other less burdensome techniques. An exciting new solution for creating layouts comes with the CSS Grid Layout Module.
In this introductory tutorial, I’ll introduce you to this relatively new CSS feature and I’ll show you using some examples how the CSS Grid Layout Module works.
What is the CSS Grid Layout Module?
The core idea behind the Grid Layout is to divide a web page into columns and rows, along with the ability to position and size the building block elements based on the rows and columns we have created in terms of size, position, and layer.
The grid also gives us a flexible way to change the position of elements with only CSS without any change to the HTML. This can be used with media queries to alter the layout at different breakpoints.
