A collection of built patterns to use as starting points, complete with fallbacks. Remember that you do not need to use these for full page layout, they could as easily be a small component in a design.
I’ve been using CSS grid (which henceforth will be referred to as Grid) for quite a bit now, and although I often talk about how we can use grid to make all kinds of creative layouts, I’m fully aware that a basic grid is still a design pattern that is very much in demand on the web.
I remember the first time I was learning CSS, and how I was excited to learn about float and inline display to place elements in the desired layout. I wonder how I would have reacted if a two-dimensional layout system was available at that time. Actually, even now I'm excited about this because it changes everything: the way we write our CSS but also the way we write our markup. With CSS grid it is easier than ever to build responsive, dynamic, and source order independent layouts.
What is z-index? Z-index is a CSS property that allows you to position HTML elements in layers on top of one another. It seems simple at first, but it’s deceptively simple.There are some weird, non-intuitive rules that can make it not behave the way you want– even if you set z-index to 999999!This article will explain in detail four of the most common reasons that z-index isn’t working for you. You’ll learn how to use CSS to bring elements to the front, or back behind other elements.
I've been chasing the idea of using (abusing?) CSS grid to build a interconnected hexagonal grid, where each hexagon fits together seamlessly. An example of this would be a lot of tabletop war games, some board games (Settlers of Catan, for instance), and some computer games (I used to play The Battle for Wesnoth, it uses a system like this).
Jen Simmons | Labs
Common UI Patterns
Basic grid layout with fallbacks using feature queries
CSS Grid Generator
CSS Grid: illustrated introduction - DEV Community 👩💻👨💻
4 reasons your z-index isn't working (and how to fix it) - Coder Coder
Building a hexagonal grid using CSS grid - ninjarockstar.dev
How To Create Pure CSS Hexagonal Grids || Codesmite
Responsive grid of hexagons demo