CategoryCSS Grid

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…

September 6, 2017 — With CSS Grid being now supported in all major browsers, most of the hacks that helped to achieve complex layouts have become obsolete, and we’d love to invite you to a little contest to explore the possibilities and features of CSS Grid together. You create an interesting, accessible layout with CSS Grid, or use CSS Grid to rebuild an existing layout, and at the end of the contest, all templates and layouts will be made available to everyone for free download under the MIT license. The aim is to build a community repository full of CSS Grid goodness that inspires fellow developers and helps spread the wide adoption of CSS Grid. Read more…

July 24, 2017 — Take a look on CSS grid layout for making websites with a demo to see different levels of enhancement. You can use the hottest cutting-edge technologies and fancy techniques, as long as you don’t forget who you are making websites for: users. Your users aren’t all the same, nor do they use the same device, OS, browser, Internet provider or input device. By providing a basic experience to begin with, you can get the best out of the modern web without compromising accessibility. In this article, Manuel Matuzović explains how floating, flexbox and grid work inviting to provide an accesible and usable experience for various browsers. Integrate progressive enhancement so you can build resilient websites! Read more…

June 16, 2017 — 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. Much of what we know of the possibilities, limitations and best practices surrounding web layouts is effectively rendered obsolete by the CSS Grid Layout module. In this article, Morten Rand-Hendriksen will bring you some concepts into practical use. What you’ll get is a starting point for exploring what new layout opportunities and challenges CSS grid brings, what old problems it solves and how to start using the module in production websites today. Read more…