CategoryCSS Grid

May 14, 2018 — Dynamic properties provide opportunities for new creative ideas, but also the potential to add complexity to CSS. Custom properties have a huge potential to change how we write and structure CSS and to a lesser extent, how we use JavaScript to interact with UI components. To get the most out of them, we might need a strategy for how we write and structure CSS with custom properties. In this article, Michael Riethmuller will show you how. Read more…

May 1, 2018 — Printing pages directly from the browser is an experience that can lead to frustration with enormous images being printed out. We have covered print stylesheets in the past here on Smashing Magazine, but in this article, Rachel Andrew takes a look at the state of printing from the browser today. She will show you how you should include print styles in your web pages, and look at the specifications that really come into their own once printing. Read more…

April 16, 2018 — In some ways, we are all still so new to CSS Grid Layout. A lot of folks keep asking about best practices that are available out there. In this article, Rachel Andrew is going to try and cover some of the things that either could be described as best practices, and some things that you probably don’t need to worry about. She will ran a survey and share the results as well as her personal thoughts. Read more…

April 9, 2018 — CSS Grid is important, really important. With it, we can now be as creative with layout on the web as we can in print, without compromising accessibility, responsiveness, or usability. If you’re at all serious about web design or development, you need to be serious about learning and using CSS Grid, too. In this article, Andrew Clarke will show you how to use one aspect, grid-template areas, an easy way of arranging elements. Read more…

February 22, 2018 — Ever wondered how achieve styling of empty grid cells without adding redundant empty elements? Well, CSS Generated Content can help you do just that. In this article, Rachel Andrew is going to take a look at how to use CSS Generated Content to achieve styling of empty cells without adding redundant empty elements and show some use cases where this technique makes sense. Read more…

December 4, 2017 — In this article, Huijing Chen covers known and obscure features of Firefox DevTools that can come in handy when you’re building and debugging CSS Grid layouts. You may have heard quite a bit of talk about a CSS feature called “Grid” this year. If you are someone who cringes when you hear the words “CSS” and “grid” in the same sentence, then I highly suggest you check out this new CSS module called CSS Grid. Read more…

November 16, 2017 — How do you come up with your list of supported browsers? Why would you force a bunch of JavaScript onto those devices? The question of browser support has to be addressed when using any new CSS. In this article, Rachel Andrew will explore approaches to dealing with browser support today. What are the practical things we can do to allow us to use new CSS now and still give a great experience to the browsers that don’t support it? Read more…

October 17, 2017 — There are methods that enable the naming of lines and even grid areas. Using these methods enables easier placement of items by name rather than number, but also brings additional possibilities when creating systems for layout. In this article, Rachel Andrew will take an in-depth look at the various ways to name lines and areas in CSS Grid Layout, and some of the interesting possibilities this creates. Try not to get hung up on what is “right” or “wrong”. If you find a method confusing, or it doesn’t seem to work in your context, simply don’t use it. The beauty of this is that we can choose the ways that make the most sense for the projects we are working on. Read more…

October 6, 2017 — CSS Grid is becoming the new layout standard for the web, and we are all still experimenting with what we can achieve with it. Read more…

September 28, 2017 — Prior to CSS Grid Layout landing in browsers, many people saw flexbox as the answer to all of our design-related problems. However, flexbox doesn’t provide a grid system any more than floats do, although it does make creating one simpler. CSS Grid is such a different way of approaching layout that there are a number of common questions Rachel Andrew is asked as people start to use the specification. In this article, she will answer some of those, and will be one in a series of articles on Smashing Magazine about layouts. Read more…