Recent CSS Bookmarks 17: Layouts

Published on:: August 11, 2024
Categories:: CSS⁶¹, bookmarks²¹
Current music:: This is The Kit — Two Wooden Spoons
Current drink:: Sencha tea

Oops, more than three months without sharing bookmarks. My excuse: I spoke at CSS Day, and went to a CSS Working Group face-to-face in A Coruña, and then rested for a bit. And then the backlog of articles to read grew and grew, becoming unmanageable.

Instead of trying to go through the whole backlog in one go, I grouped all the bookmarks, and will post them group-by-group.

Today, it is all about layouts.

“Learn Grid Now, Container Queries Can Wait” by Miriam Suzanne — a call to start using CSS grids more, as they’re already available for quite a long time, and are very cool. Use them.
“The Gap” by Ahmad Shadeed — an article about the history of how we used margin property in the past, and how the gap property in flex and grid layouts eliminates many pain points of margins.
“CSS Grid Areas” by Ahmad Shadeed — a deep exploration of how grid areas work, with many interactive examples and use cases.
“Modern CSS Layouts: You Might Not Need A Framework For That” by Brecht De Ruyte — an article about four reusable and configurable layouts based on CSS flex and grid modules.
“Responsive bar charts in HTML and CSS” by Mathias Schäfer — a case-study of migrating a chart built with SVG to HTML&CSS as a way to make it responsive, with the help of a CSS grid layout, including using subgrids and logical properties.
“Absolute positioning with CSS grid” by Elaina Natario — a post about one useful aspect of CSS grids: an ability to place elements into overlapping areas, either fully reusing the same grid area, or create intersecting ones.
“In defense of asymmetric grids” by Robin Rendle — a short post about how CSS grids allow us to have any grids we want and not just a common 12-columns one (which is still effortless to do with them).
“Fluid Breakout Layout with CSS Grid” by Nathan Long — an article about how we can set up a complex grid with many defined grid lines that allow us to create complex breakout layouts. It defines the lines using grid-template-columns, which, in my opinion, is a bit cumbersome, so I invite you to also look at my old “Grid Projection Naming” article about how we can use grid-template-areas to simplify this.
“Yet another take on layout breakouts” by Noah Liebman — a post about another way to do simple breakout layouts by using negative margins and max-inline-size.
“Request for developer feedback on reading-flow and elements with display: contents” by Rachel Andrew — a post about the property previously drafted as reading-order-items, its current status and a call for feedback over how it should work with display: contents.
“Let’s make a floating button sign up form pattern” by Andy Bell — a case study of creating a micro-layout for an input+button pattern, going into numerous nuances related to accessibility and responsiveness related to it.
“Fit-to-Width Text: A New Technique” by me — while it is not really about layouts, this technique uses flexbox inside, as a workaround for not being able to apply container query to an element with an intrinsic width.

If I missed something you wrote, or if you saw something else about CSS layouts that I did omit, but you found interesting, — you are always welcome to send links my way.