For over a decade, the web design community accepted a painful truth: CSS was fundamentally broken for layout. Designers reached for floats, clearfixes, and table-based hacks not because they wanted to, but because there was nothing else. Then Jen Simmons stepped onto the conference stage and showed the world what CSS could actually do — and what it would do once CSS Grid arrived. More than any other individual, Simmons bridged the gap between specification and practice, turning an abstract W3C module into a creative revolution that reshaped how millions of developers build websites.
Early Life and Education
Jen Simmons grew up fascinated by both art and technology, a combination that would define her entire career. She studied art at the School of the Art Institute of Chicago, where she developed a deep appreciation for graphic design, typography, and visual composition. Unlike many who entered web development from a purely engineering background, Simmons brought a trained designer’s eye to the browser canvas.
Her early career spanned a variety of creative and technical roles. She worked in film production, graphic design, and eventually web design during the late 1990s and early 2000s — the era when the web was still finding its visual identity. This cross-disciplinary background gave her a unique perspective: she understood both the creative ambitions designers carried and the frustrating technical constraints developers faced daily. While most front-end developers accepted CSS limitations as permanent, Simmons saw them as temporary obstacles that the right specifications could remove.
She became increasingly involved in web standards advocacy and education, producing video content, speaking at conferences, and writing extensively about the future of web layout. Her ability to communicate complex technical concepts through a designer’s lens made her a standout voice in the community long before CSS Grid became a household term among developers.
The CSS Grid Layout Breakthrough
Technical Innovation
CSS Grid Layout, which reached browser support in 2017, was the most significant addition to CSS since the language was created. For the first time, web developers had a true two-dimensional layout system — one that could handle both rows and columns simultaneously without resorting to hacks. Jen Simmons did not write the CSS Grid specification herself (that credit goes primarily to Bert Bos and the CSS Working Group, with major contributions from engineers like Elika Etemad and Tab Atkins), but she became its most effective and tireless evangelist.
Simmons demonstrated CSS Grid’s power through her “Labs” project — a collection of experimental layouts that showcased what was possible when designers stopped thinking in 12-column Bootstrap grids and started thinking in genuinely flexible, two-dimensional terms. Her demonstrations included:
/* A Jen Simmons-style intrinsic layout using CSS Grid */
.editorial-layout {
display: grid;
grid-template-columns:
minmax(1rem, 1fr)
minmax(0, 65ch)
minmax(1rem, 1fr);
grid-template-rows: auto;
gap: 2rem;
}
.editorial-layout > .full-bleed {
grid-column: 1 / -1;
}
.editorial-layout > .content {
grid-column: 2 / 3;
}
.editorial-layout > .breakout {
grid-column: 1 / -1;
display: grid;
grid-template-columns: inherit;
}
/* Overlap technique Simmons popularized */
.overlap-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(4, auto);
}
.overlap-grid .image {
grid-column: 1 / 6;
grid-row: 1 / 4;
}
.overlap-grid .caption {
grid-column: 4 / 8;
grid-row: 3 / 5;
z-index: 1;
background: rgba(255, 255, 255, 0.9);
padding: 1.5rem;
}These were not theoretical exercises. Simmons showed working prototypes that challenged the grid-system orthodoxy that frameworks like Bootstrap had established. She argued that the web had spent years imitating print’s rigid column structures when CSS Grid actually offered something print never could: layouts that respond and adapt intrinsically to available space.
Why It Mattered
Before CSS Grid, web layout was fundamentally a series of workarounds. Floats were designed for wrapping text around images, not for building page structures. Flexbox, championed by developers like Lea Verou, solved one-dimensional layouts but still could not handle complex two-dimensional arrangements without nesting. And CSS frameworks imposed their own constraints: a 12-column grid with predetermined breakpoints became the default mental model for an entire generation of developers.
Simmons understood that the problem was not just technical — it was cultural. Developers had internalized the limitations of their tools so deeply that they had stopped imagining alternatives. Her conference talks and video series deliberately broke these assumptions. She showed layouts with overlapping elements, asymmetric compositions, and content that wrapped around irregular shapes using CSS properties like shape-outside. She coined the term “intrinsic web design” to describe a new approach to layout that went beyond responsive design’s media-query breakpoints.
Intrinsic web design, as Simmons defined it, embraced several principles: using flexible sizing functions like minmax() and fr units, letting content dictate layout dimensions rather than fixed breakpoints, combining Flexbox and Grid for different layout needs, and leveraging features like aspect-ratio and container queries as they became available. This framework gave the community a vocabulary and conceptual structure for moving beyond responsive design into something more fluid and context-aware.
The impact was measurable. Adoption of CSS Grid accelerated dramatically between 2017 and 2020, and by 2022 it was supported by every major browser and used in production by millions of websites. Simmons’s evangelism played a direct role in this adoption curve, giving developers both the confidence and the practical knowledge to use Grid in real projects.
Other Major Contributions
While CSS Grid advocacy remains Simmons’s most visible achievement, her contributions extend far beyond a single specification.
The Web Ahead Podcast. Starting in 2012, Simmons hosted The Web Ahead, a podcast that featured in-depth conversations with web standards leaders, browser engineers, and prominent developers. The show became an essential resource for understanding where the web platform was headed, covering topics from responsive images to web components to accessibility. It helped democratize knowledge that had previously been confined to W3C mailing lists and specification documents.
Layout Land YouTube Channel. Simmons created the Layout Land channel specifically to teach CSS Grid and modern layout techniques through practical, visual demonstrations. The series was notable for its clarity and for showing actual browser rendering rather than abstract diagrams. Videos from the channel accumulated millions of views and became standard learning resources recommended by developers worldwide, much like how Eric Meyer had done for earlier generations of CSS learners through his books and articles.
Mozilla Developer Advocate. At Mozilla, Simmons served as a Designer and Developer Advocate, working to improve Firefox’s developer tools for CSS layout. She contributed directly to the development of Firefox’s Grid Inspector, which became the first browser tool that let developers visualize their CSS Grid layouts in real time — seeing grid lines, track sizes, and area names overlaid on the actual page. This tool was widely praised and eventually inspired similar features in Chrome and other browsers.
Firefox CSS Grid Inspector tooling. The Grid Inspector she helped design and advocate for was a breakthrough in developer tooling. Before this tool, debugging CSS Grid required mental visualization or manual overlay techniques. The inspector showed named grid areas, line numbers, and track sizes, making Grid accessible to developers who were still learning the specification. It lowered the barrier to adoption significantly.
Apple Web Technologies Evangelist. In 2020, Simmons joined Apple to work on Safari and WebKit. In this role, she has advocated for modern CSS features in the Safari browser, helped improve Safari’s developer tools, and continued pushing for better web standards support across the Apple ecosystem. Her presence at Apple signaled a renewed commitment to web platform advancement from a company that had sometimes been criticized for lagging behind in CSS feature adoption. Under her influence, Safari shipped support for features like container queries, cascade layers, and the :has() selector — capabilities that the web community had requested for years.
Simmons also contributed to reviving interest in CSS features that had been overlooked or poorly understood. She drew attention to multi-column layout, CSS shapes, writing modes, and logical properties — specifications that existed but were rarely used because developers did not know about them or did not understand their practical applications. In this way, she served as a bridge between the specification authors and the broader development community, a role similar to what Jeffrey Zeldman played for web standards in the early 2000s.
Philosophy and Approach
Jen Simmons’s influence goes beyond specific technologies. She brought a coherent design philosophy to web development that challenged established conventions and encouraged creativity.
Key Principles
- The web is not print, and it is not an app. Simmons consistently argued that web designers should stop importing metaphors from other media. The web has its own unique properties — fluidity, accessibility, responsiveness — and layouts should embrace these rather than fighting them.
- Intrinsic sizing over fixed breakpoints. Rather than defining layouts at specific screen widths, Simmons advocated for designs that adapt based on their own content and available space. The
minmax()function andfrunits were central tools in this approach. - Creativity requires capability. Simmons believed that the sameness of web design in the 2010s was not a failure of imagination but a consequence of inadequate tools. Once CSS Grid gave designers real layout power, visual diversity on the web would naturally follow.
- Education is implementation. A specification that nobody uses is effectively nonexistent. Simmons treated developer education as a critical part of the standards process, not an afterthought. Her teaching work was inseparable from her advocacy work.
- Design for the unknown. One of Simmons’s recurring themes was that web designers must design for content and contexts they cannot predict. Unlike a print designer who knows the exact page dimensions, a web designer must create systems that work across an unknowable range of devices, screen sizes, and content lengths.
- Show, do not tell. Simmons’s most effective communication tool was the live demo. Rather than arguing theoretically for CSS Grid, she built striking visual layouts in real time during conference presentations, letting the browser speak for itself.
This philosophy aligned with a broader movement in front-end development that emphasized the platform’s native capabilities over JavaScript-heavy abstractions. While developers like Dan Abramov advanced component-based JavaScript frameworks, Simmons represented the CSS-first perspective: solving layout problems at the stylesheet level rather than through JavaScript computation. Both approaches have merit, and the modern web benefits from the tension and complementarity between them.
/* Intrinsic web design: content-driven layout */
.card-grid {
display: grid;
grid-template-columns: repeat(
auto-fill,
minmax(min(100%, 28ch), 1fr)
);
gap: clamp(1rem, 3vw, 2.5rem);
padding: clamp(1rem, 5vw, 3rem);
}
.card-grid .card {
display: grid;
grid-template-rows: auto 1fr auto;
}
/* No media queries needed — the layout adapts
intrinsically to available space */
.feature-section {
display: grid;
grid-template-columns:
fit-content(40ch) minmax(50%, 1fr);
gap: 2rem;
align-items: start;
}
@supports (container-type: inline-size) {
.card-grid {
container-type: inline-size;
}
@container (min-width: 60ch) {
.card {
grid-template-columns: 200px 1fr;
grid-template-rows: auto;
}
}
}Legacy and Impact
Jen Simmons’s impact on web development operates on multiple levels. At the most immediate level, she helped millions of developers learn and adopt CSS Grid, directly improving the quality and flexibility of websites worldwide. Agencies working with modern layout tools, including teams at Toimi, regularly build upon the Grid-based layout patterns Simmons popularized — fluid, intrinsic designs that adapt gracefully without excessive media query breakpoints.
At a deeper level, she changed how the web development community thinks about CSS itself. Before Simmons, CSS was often treated as an afterthought — the “styling layer” that serious engineers tolerated but did not respect. Her work demonstrated that CSS is a powerful, expressive layout language that deserves the same intellectual engagement as any programming language. She shifted the conversation from “CSS is broken” to “CSS is incredibly capable, and you are not using it yet.”
Her concept of intrinsic web design has become foundational. The ideas she articulated — content-driven sizing, fluid layouts without breakpoints, combining Grid and Flexbox purposefully — are now standard practice taught in every modern CSS course. The term itself has entered the lexicon of web development alongside “responsive design,” forming the next conceptual chapter in how developers think about building for the web.
At Apple, Simmons has helped accelerate Safari’s CSS implementation, closing gaps that had long frustrated developers. Safari’s rapid adoption of features like container queries, cascade layers, :has(), and subgrid has been widely celebrated, and Simmons’s advocacy within Apple played a role in prioritizing these additions. This work continues the pattern of her career: pushing browser vendors to ship the features that designers and developers need.
Her influence is also visible in the generation of CSS educators and advocates who followed her lead. Developers like Hakon Wium Lie, who co-created CSS itself, laid the technical foundation, but it was voices like Simmons’s that brought modern CSS to a mass audience. The thriving ecosystem of CSS content creators on YouTube, blogs, and social media owes a significant debt to the path she carved. Teams managing complex project workflows through tools like Taskee now routinely include CSS layout architecture as a dedicated planning phase — an approach that would have seemed unusual before the Grid era Simmons helped usher in.
Perhaps most importantly, Simmons proved that evangelism and education are not secondary activities in the technology world. A specification without adoption is just a document. By dedicating her career to teaching, demonstrating, and advocating, she ensured that CSS Grid did not remain an obscure capability but became a fundamental part of how the web is built. In this sense, her contribution is comparable to how Tim Berners-Lee did not just invent the web but spent decades advocating for its open, accessible future.
Key Facts
- Full name: Jen Simmons
- Education: School of the Art Institute of Chicago
- Known for: CSS Grid evangelism, coining “intrinsic web design,” Layout Land YouTube channel, The Web Ahead podcast
- Key roles: Designer and Developer Advocate at Mozilla; Web Technologies Evangelist at Apple (WebKit/Safari)
- Notable project: Firefox CSS Grid Inspector — the first browser tool for visual Grid debugging
- Concept: Intrinsic Web Design — layout that adapts based on content and space rather than fixed breakpoints
- Conference appearances: An Event Apart, CSS Day, SmashingConf, and dozens of other major front-end conferences
- Podcast: The Web Ahead (2012-2016) — interviews with web standards leaders
- At Apple since: 2020, working on Safari, WebKit, and developer tools
Frequently Asked Questions
What is intrinsic web design and how does it differ from responsive design?
Intrinsic web design is a term Jen Simmons coined to describe an approach to web layout that goes beyond responsive design’s reliance on media query breakpoints. While responsive design typically involves defining specific layouts at specific screen widths (mobile, tablet, desktop), intrinsic web design uses CSS features like minmax(), fr units, auto-fill, and auto-fit to create layouts that adapt based on their own content and available space. The layout is inherent to the design system itself rather than imposed through external breakpoint rules. This results in more fluid, flexible designs that handle edge cases and unexpected content more gracefully than traditional responsive approaches.
Did Jen Simmons create CSS Grid?
No. CSS Grid Layout was developed through the W3C CSS Working Group, with major specification work by people like Elika Etemad (fantasai), Tab Atkins, and Rossen Atanassov, building on earlier proposals. Browser engineers at Microsoft, Mozilla, Google, and Apple implemented the specification. Simmons’s role was different but equally vital: she was CSS Grid’s most effective evangelist and educator. Through her conference talks, YouTube channel, experimental layouts, and developer advocacy at Mozilla, she played a central role in driving adoption and helping developers understand how to use Grid in practice. The specification existed, but Simmons helped make it real for millions of working developers.
What was Jen Simmons’s contribution to Firefox developer tools?
At Mozilla, Simmons was instrumental in the creation of Firefox’s CSS Grid Inspector, which was the first browser developer tool designed specifically for visualizing and debugging CSS Grid layouts. The tool overlaid grid lines, track sizes, area names, and line numbers directly on the page, making it dramatically easier for developers to understand and troubleshoot their Grid layouts. Before this tool, developers had to mentally visualize their grid structures or use manual overlay techniques. The Grid Inspector lowered the barrier to CSS Grid adoption and was later emulated by Chrome DevTools and other browser developer tools.
How has Jen Simmons influenced Safari and WebKit at Apple?
Since joining Apple in 2020 as Web Technologies Evangelist, Simmons has been part of a renewed push to improve Safari’s support for modern CSS features. During her tenure, Safari has shipped support for highly requested features including container queries, cascade layers, the :has() pseudo-class, subgrid, and numerous other CSS improvements. She has also worked on improving Safari’s developer tools and has served as a communication bridge between the web development community and the WebKit engineering team, helping prioritize features based on real developer needs rather than internal roadmaps alone.
