Tag - Grid

The CSS Grid Challenge: Build A Template, Win Some Smashing Prizes!

   Layout on the web has always been tricky, but with CSS Grid being now supported in all major browsers, most of the hacks that helped to achieve complex layouts have become obsolete. Firefox even has a CSS Grid Inspector built in, so that there’s nothing to hold you back from making even the most challenging flexible layout reality.To explore the possibilities and features of CSS [...]

Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid

   Earlier this year, support for CSS grid layout landed in most major desktop browsers. Naturally, the specification is one of the hot topics at meet-ups and conferences. After having some conversations about grid and progressive enhancement, I believe that there’s a good amount of uncertainty about using it. I heard some quite interesting questions and statements, which I want to address in this post.“When can [...]

A Collection of Interesting Facts about CSS Grid Layout

A few weeks ago I held a CSS Grid Layout workshop. Since I’m, like most of us, also pretty new to the topic, I learned a lot while preparing the slides and demos. I decided to share some of the stuff that was particularly interesting to me, with you.Have fun! Negative values lower than -1 may be used for grid-row-end and grid-column-end In a lot of code examples and tutorials you will see that you can use grid-column-start: 1 and grid-column-end: [...]

Building Production-Ready CSS Grid Layouts Today

   Industries often experience evolution less as slow and steady progress than as revolutionary shifts in modality that change best practices and methodologies seemingly overnight. This is most definitely true for front-end web development.Our industry thrives on constant, aggressive development, and new technologies emerge on a regular basis that change the way we do things in fundamental ways. The post Building Production-Ready CSS Grid Layouts Today appeared [...]