CSS Grid Component Patterns
For the longest time, web layout has been one of the hardest problems to solve. This has primarily been due to the fact that the web was originally designed around documents and how a document flows. As the web has changed, the need for proper layout solutions have been in high demand to be added to the CSS spec.
The first item to be added was flex-box. Flexbox was designed to give better control over the layout in one direction, either row or column. It allows you to define flexible width items that will grow and shrink according to the parent container size as well as how to position the elements inline.
Though Flexbox does have rules around wrapping elements when they start to overflow out of the parent container, flex-box was never designed around creating a 2-D grid. Luckily, a new CSS specification was added shortly after flex-box: CSS Grid.
With CSS Grid we now do a few important things that we have been lacking. First of all, we can now define our layout in rows and columns at the same time. It doesn’t matter if we use a combination of explicit and implicit rows and columns definitions, the biggest thing is we no longer need a library’s n-column grid system to achieve layouts.
The second hugely impactful thing that was added was the concept of a gap. A gap defines the margin in between the child elements of a…
