Designing with CSS Grid Layout.

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 two-dimensional grid - offering the kind of fine-grained layout control that print designers take for granted! Grid Layout has 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 on your own sites in no time. This collection includes: An Introduction to the CSS Grid Layout Module by Ahmad Ajmi Seven Ways You Can Place Elements Using CSS Grid Layout by Nitish Kumar How to Order and Align Items in Grid Layout by Nitish Kumar A Step by Step Guide to the Auto- Placement Algorithm in CSS Grid by Nitish Kumar How I Built a Pure CSS Crossword Puzzle by Adrian Roworth This book is suitable for front end developers and web designers with some CSS experience. Designing with CSS Grid Layout 2 Notice of Rights 2 Notice of Liability 2 Trademark Notice 2 About SitePoint 3 Table of Contents 4 Preface 5 Conventions Used 5 Code Samples 5 Tips, Notes, and Warnings 6 Hey, You! 6 Ahem, Excuse Me ... 6 Make Sure You Always ... 6 Watch Out! 6 An Introduction to the CSS Grid Layout Module 7 by Ahmad Ajmi 7 What is the CSS Grid Layout Module? 8 A Grid Layout Example 8 Grid Layout Module Concepts 12 Position Items by Using a Line Number 13 Position Items by Using Named Areas 16 Slack Example 17 Grid Layout Module vs Flexbox 20 CSS Grid Layout Module Resources 21 Conclusion 21 Seven Ways You Can Place Elements Using CSS Grid Layout 22 by Nitish Kumar 22 #1 Specifying Everything in Individual Properties 23 #2 Using grid-row and grid-column 24 #3 Using grid-area 26 #4 Using the span Keyword 27 #5 Using Named Lines 29 #6 Using Named Lines with a Common Name and the span Keyword 32 #7 Using Named Grid Areas 35 How to Order and Align Items in Grid Layout 37 by Nitish Kumar 37 How the Order Property Works in Grid Layout 37 Aligning Content Along the Row Axis in Grid Layout 41 Aligning Content Along the Column Axis in Grid Layout 42 Aligning the Whole Grid 43 Conclusion 45 A Step by Step Guide to the Auto-Placement Algorithm in CSS Grid 46 by Nitish Kumar 46 Basic Concepts for a Better Grasp of the Auto-placement Algorithm 47 Step #1: Generation of Anonymous Grid Items 48 Step #2: Placement of Elements with an Explicitly Specified Position 49 Step #3: Placement of Elements With a Set Row Position but No Set Column Position 51 Sparse Packing in Step #3 52 Dense Packing in Step #3 53 Step #4: Determining the Number of Columns in the Implicit Grid 54 Step #5: Placement of Remaining Items 55 Sparse Packing in Step #5 55 Placement of Items E and F without Definite Position in Either Axis 57 Placement of Items G and H with a Definite Column Position 57 Dense Packing in Step #5 57 Conclusion 58 How I Built a Pure CSS Crossword Puzzle 60 by Adrian Roworth 60 Building the Board/Grid 61 Using Form Elements for the Squares 62 Using the General Sibling Selector 63 Indicating Correct Answers 66 Challenges of the Grid System 67 Checking for Valid Letter Input 69 Highlighting the Clues on Hover 69 Numbering the Clues 70 The “Check for Valid Squares” Checkbox 71 Conclusion 73