Jane Doe
Published a new article about CSS Grid Identity systems and how semantic HTML auto-registers to grid areas.
data-layout="media" places a figure and content side by side — the most common component pattern on the web.
An image or avatar next to text content. The figure auto-sizes, content fills remaining space.
Published a new article about CSS Grid Identity systems and how semantic HTML auto-registers to grid areas.
Using a <figure> element for the media side. Figures auto-place to the figure grid area.
The figure element is auto-detected and placed in the figure grid area. Content fills the rest.
Add data-layout-reverse to flip the figure to the right side.
Content on the left, figure on the right. Same HTML order, different visual layout.
A list of media objects is a natural fit for activity feeds, comment lists, and notification panels.
Deployed v2.1.0 to production. All health checks passing.
Merged pull request #247: Add container query support to media layout.
Opened issue: Grid identity not working with shadow DOM in Firefox.
Control vertical alignment with data-layout-align.
A design system for the semantic web. CSS layouts, design tokens, and web components.
The avatar and text content are vertically centered.
Media objects automatically stack when their container is narrower than 25rem (via container query). Resize the browser window to see the transition.
Resize the browser window narrower than 25rem to see this media object stack vertically via container query.