Issue 274
A grid solution to layout shifts, CSS Shapes and emoji, grid sites that don't look so griddy.
News
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.
Learn
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.
Interesting
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.
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.