CategoryCSS Grid

November 2, 2020 — There is now a specification for native CSS masonry layout, as part of the Grid Layout spec. In this article, Rachel Andrew will explain the draft spec, with examples that you can try out in Firefox Nightly. While this is a feature you won’t be able to use in production right now, your feedback would be valuable to help make sure it serves the requirements that you have for this kind of layout. So let’s take a look. Read more…

July 7, 2020 — If you are the sort of person who doesn’t like reading about things if you can’t use them now, then this article probably isn’t for you — we have many others for you to enjoy instead! However, if you like to know what is on the way and read more about the things you can play with in a beta version of a browser, read on! Today, Rachel Andrew takes a look at some of the interesting CSS features that are making their way into browsers right now. Read more…

June 30, 2020 — We’re talking about CUBE CSS. What is it, and how does it differ from approaches such as BEM, SMACSS, and OOCSS? Drew McLellan talks to its creator, Andy Bell, to find out. Read more…

April 21, 2020 — In this episode of the Smashing Podcast, we’re talking about running online workshops. How can a traditional event adapt when participants can’t attend in person? Drew McLellan talks to Rachel Andrew to find out. Read more…

February 12, 2020 — In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, Rachel Andrew will learn how to use the grid-template-areas property to define placement on the grid and find out how the property really works. If you haven’t used this layout method before, give it a try. We find that it is a lovely way to experiment with layouts and often use it when prototyping a layout — even if for one reason or another we will ultimately use a different method for the production version. Read more…

February 5, 2020 — In this article, Dan Halliday reviews the standard approach to creating animated flip cards, and introduces an improved method which solves its sizing problem. You’re going to build a flip card grid with some CSS basics — transforms, flex, and grid. Dan will cover: how flip cards are usually implemented using absolute positioning, the sizing problem that absolute positioning introduces, and a general solution for automatic sizing of overlaid content. Let’s dig in! Read more…

January 10, 2020 — In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a look at how to use the grid lines to place items. The other methods Rachel will show you in future articles are alternate ways to specify your layout, but are based on the grid created by numbered lines. But for today, here you will find pretty much all you need to know about grid lines! Read more…

January 3, 2020 — In a new series, Rachel Andrew breaks down the CSS Grid Layout specification. This time, we take a detailed look at what happens when you create a grid container and the various properties that can be applied to the container to shape your grid. Read more…

December 27, 2019 — The CSS contain property gives you a way to explain your layout to the browser, so performance optimizations can be made. However, it does come with some side effects in terms of your layout. In this article, Rachel Andrew is going to introduce a CSS Specification that has just become a W3C Recommendation. The CSS Containment Specification defines a single property, contain, and it can help you to explain to the browser which parts of your layout are independent and will not need recalculating if some other part of the layout changes. Read more…

November 1, 2019 — In a lot of cases we can do these things with CSS —just not on the web. For example, CSS is also used for print formatting via user agents designed for outputting to PDF.  In this article, Rachel Andrew looks at some common layout patterns that we can’t yet do on the web and the CSS Specifications that might let us achieve them in the future. While most of her articles are about things we can do, this one is about things we can’t but that perhaps we might be able to do in the future. Take a look. Read more…