Recreating the GitHub Contribution Graph with CSS Grid Layout

Recently, I decided to try to recreate the GitHub Contribution graph using CSS Grid Layout, and found it was an interesting challenge. As I always find while working with CSS Grid Layout, I end up with far less CSS than I would have using almost any other method. In this case, the layout-related part of …

CSSGrid.io – Free Video Series to learning CSS Grid

Great new video series by Wes Bos, this time on learning CSS Grid. CSS Grid may seem a bit daunting with new syntax and layout ideas, but it’s fairly simple and can be broken down into a handful of powerful concepts that when used together will blow your mind and change the way you create …

Design Systems and CSS Grid

Stuart Robson uses CSS Grid for what it’s meant to be used for: creating a grid. He evens creates a faux subgrid by leveraging calc() to define the two margin-columns. .container { grid-template-columns: [full-start] minmax(calc(calc(100% – 1008px) / 2), 1fr) [main-start] repeat(14, [col-start] 1fr) [main-end] minmax(calc(calc(100% – 1008px) / 2), 1fr) [full-end]; } Add in …

Breaking the CSS Grid (and how to fix it)

Dave Rupert lists two scenarios in which the CSS Grid can be broken, and how to fix it: Overflow-x Elements break the Grid Form Controls break the Grid To easily fix these, Dave has whipped up a small CSS snippet he calls “Fit Grid”, containing a CSS class you can apply to prevent these issues …

The Difference Between Explicit and Implicit Grids

Grid Layout finally gives us the ability to define grids in CSS and place items into grid cells. This on its own is great, but the fact that we don’t have to specify each track and we don’t have to place every item manually makes the new module even better. Grids are flexible enough to …

Masonry Layout with CSS Grid and grid-auto-flow: dense;

By setting grid-auto-flow: dense;, the Grid auto-placement algorithm will attempt to fill in holes earlier in the grid if smaller items come up later, resulting in a Masonry-like layout. (click for demo) (via) 💁‍♂️ Do note that the result isn’t 100% masonry, but masonry-like. As Rachel Andrew – who else – notes: At first glance …

GridBugs – A Curated List of CSS Grid Interop Issues

Like Flexbugs, but then for CSS Grid Layout: Inspired by Flexbugs this list aims to be a community curated list of CSS Grid Layout bugs, incomplete implementations and interop issues. Grid shipped into browsers in a highly interoperable state, however there are a few issues – let’s document any we find here. By Rachel Andrew …