Tag - Grid

Using CSS Grid: Supporting Browsers Without Grid

   When using any new CSS, the question of browser support has to be addressed. This is even more of a consideration when new CSS is used for layout as with Flexbox and CSS Grid, rather than things we might consider an enhancement.In this article, I explore approaches to dealing with browser support today. What are the practical things we can do to allow us to [...]

Naming Things In CSS Grid Layout

   When first learning how to use Grid Layout, you might begin by addressing positions on the grid by their line number. This requires that you keep track of where various lines are on the grid, and also be aware of the fact the line numbers reverse if your site is displayed for a right-to-left language.Built on top of this system of lines, however, are methods [...]

Monthly Web Development Update 10/2017: CSS Grid, CAA Pitfalls, And Image Optimization

   Editor’s Note: Welcome to this month’s web development update. Anselm has summarized the most important happenings in the web community that have taken place over the past few weeks in one handy list for you. Enjoy!As web developers, we’re working in a very diverse environment: We have countless options to specialize in, but it’s impossible to keep up with everything. This week I read an [...]

CSS Grid Challenge: Winners and Templates

   CSS Grid is becoming the new layout standard for the web, and we are all still experimenting with what we can achieve with it. Some folks assume that CSS Grid is just a replacement for table layouts or Flexbox — but that’s simply not true. Some also think that they can use CSS Grid to replicate more advanced print layouts, which brings us all closer [...]

CSS Grid Gotchas And Stumbling Blocks

   In March this year, CSS Grid shipped into production versions of Chrome, Firefox and Safari within weeks of each other. It has been great to see how excited people are about finally being able to use it to solve real problems.CSS Grid is such a different way of approaching layout that there are a number of common questions I am asked as people start to [...]

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 [...]