Thanks to CSS Grid it’s really easy to make the <dt> and <dd> elements appear in two columns. The original code was created by Lea Verou. This altered version here plays nice with multiple successive <dt> and <dd> elements.
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 […]
CSS Grid Playground is a ten part tutorial by Mozilla. With resources like this (amongst others) – and proper browser support – there’s no reason not to use Grid Layout. CSS Grid Playground → 💁♂️ CSS Grid Gotchas And Stumbling Blocks is also worth a read once you’re familiar with CSS Grid.
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 […]
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 […]
Firefox has been taking the lead into this one. Adem Ilter has created a basic version that works with Google Chrome. CSS Grid Highlighter for Google Chrome →
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 […]
Nice work by the Firefox DevTools Team: Available in Firefox Nightly (for now). Powerful New Additions to the CSS Grid Inspector in Firefox Nightly →
A common thing to see in a design are visuals that break out of the main content column. You most likely have already seen this kind of design over at Medium for example, where it’s common for the main visual to be full width, whilst the content remains centered. Your typical Medium layout:content caged in […]
One incredibly useful new feature introduced with the CSS Grid Layout Specification is the minmax() function. This function opens the door to us being able to write much more powerful and succinct CSS by allowing us to set, as a value for a grid track, a function including both a minimum and maximum value. Using […]