CSS Grid is the best thing (so far) to come out of the standard, it’s flexible approach to two dimensional design is long overdue and well worth the wait.
Over the last eleven months I’ve learned to love CSS Grid for it’s amazing ability. It’s ability to simplify one of the trickiest web (layout) development tasks we fumble through…
…Setting up the grid. In day’s gone-by it was somewhat a traumatic experience to set up your grid. Using floats or flex’s wrapped in container after container. Whether it was a complex grid or simple grid, being able to do so with just a few lines of css was near on impossible!
With the long overdue CSS Grid, it’s unbelievably easy to create a repeating grid system that can have multiple uses within one application or website. Our base grid in this example is powered from just three lines of CSS. And to be fair (to the standard), the grid item doesn’t actually need its most basic three lines of code to function.
Below is an example of how you might implement this grid system. In our case the items might hold media like images, video, icons, or even products. Furthermore, without much effort the active/hovered item could easily be extended to accept a hidden slide out panel, expanded into a full-screen modal or flipped for more content.
