CategoryCSS Grid

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…

October 4, 2019 — By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid — features that become even more powerful when we introduce subgrids. In this article, Rachel Andrew is going to demonstrate an approach to this kind of editorial design, which builds on a few techniques. In addition to this being a nice way to name sections of your layout, this technique exposes a whole bunch of interesting things about Grid Layout which you may find useful in creating your own layout patterns. Read more…

August 6, 2019 — The support of multiple writing modes is key to the way that our new layout methods of Flexbox and Grid Layout have been designed. An understanding of CSS Writing Modes is useful if you want to work with vertical scripts, or change writing mode for creative reasons. However, they also underpin our new layout methods, and those ideas are increasingly being applied across all of CSS. In this article, find out why Rachel Andrew believes understanding writing modes is so important. Read more…

July 9, 2019 — You may not have thought much about lists, although we use them frequently in our markup. Many things can be marked up quite logically as a list. There is more to styling lists in CSS than you might think. In this article, Rachel Andrew starts by looking at lists in CSS, and moving onto some interesting features defined in the CSS Lists specification — markers and counters. Read more…