Skip to content

Issue 274

A grid solution to layout shifts, CSS Shapes and emoji, grid sites that don't look so griddy.

Rachel Andrew
1 min read


Issue 274

Hello! Here we are with another Tuesday and another CSS Layout News. The clocks changed here in the UK last weekend, ahead of the clock-change in the USA. This week is the week where everyone is confused about what time their meeting starts!

Some really nice things to take a look at this week, so I hope you find something useful there.

Rachel Andrew, CSS Layout News

MDN Web DNA 2020

The 2019 Web DNA survey brought up plenty of interesting data, and the survey is open again. It's quite a long survey but filling it our brings your needs to browser vendors, the W3C, and the folk documenting the web over at MDN.


Prevent layout shifts with CSS grid stacks - Hubert Sablonnière

A really nice walkthrough on using Grid to solve layout shifts with components which change height.

Fundamentals of layout in user interface design (UI) | by Leonardo Moreno | UX Collective

An explanation of fundamentals in layout design.

Mini Insta-Friends Scrolling List Layout - YouTube

Video from Adam Argyle showing how to make a layout like the Stories navigation from Instagram, loads of fun little bits in here.

Creating CSS Shapes with Emoji | CSS-Tricks

This is neat. Combining CSS Shapes with emoji.


Thinking Outside the Box with CSS Grid - Frontend Horse

An article talking through some examples of websites that use CSS Grid but perhaps don't look so ... griddy.