Software developer at a big library, cyclist, photographer, hiker, reader. Email: chris@improbable.org
24089 stories
·
214 followers

The GMO tooth microbe that is supposed to prevent cavities | Ars Technica

1 Share

About seven years ago, Aaron Silverbook and his then-girlfriend, a biologist, were perusing old scientific literature online. “A romantic evening,” joked Silverbook. That night, he came across a study from 2000 that surprised him. Scientists had genetically engineered an oral bacterium that they said could possibly prevent tooth decay: “I read it and sort of boggled at it and said, ‘Wow, this is a cavity vaccine. Why don’t we have this?’”

So, Silverbook tracked down the primary author, Jeffrey Hillman, a now-retired oral biologist formerly at the University of Florida, to see if he could pick up the torch.

In 2023, Silverbook founded Lantern Bioworks, which made a deal with Oragenics, the company Hillman co-founded and that owned the technology, for the materials. Lantern Bioworks then launched the genetically engineered bacteria under the name Lumina Probiotic. “I didn’t expect it to happen in my lifetime,” said Hillman.

About seven years ago, Aaron Silverbook came across a study of a genetically engineered oral bacteria that he described as a “cavity vaccine.” Now, his company is launching the bacteria as a one-time home application product called Lumina Probiotic.

Visual: Courtesy of Aaron Silberbook

As recently as last month, a website for the product included language about cavity prevention. And a previously available press kit stated that “a one-time brushing with this genetically modified bacteria could indefinitely prevent dental cavities.” By the time Lumina became available for pre-orders last week, however, that wording and the press kit had been removed. Silverbook — who does not have a background in dentistry or microbiology — told Undark that his lawyer advised the change in wording on the website, as Lantern Bioworks is bringing the product to market as a cosmetic, meaning it can’t make health claims about Lumina. Cosmetics don’t need to go through the same rigorous trials a drug would. “If anything I said sounded like a medical claim,” Silverbook told Undark in an interview earlier this year, “it wasn’t.”

The product can be applied to teeth as a one-time application either at home or by a dentist. Additional applications can “expedite inoculation,” Silverbook wrote in a follow-up email. He said the company anticipates Lumina will ship by mid-June.

Some people have already received it. Silverbook said he introduced Lumina into his own mouth in October of 2023, and that Lantern Bioworks has also provided it to about 60 people, including attendees of Vitalia, a biotechnology conference held in Honduras earlier this year. At the conference, Lumina was offered for $20,000 per treatment, though the pre-order price has been reduced to $250 before taxes and shipping fees. (Silverbook would not comment on how many people went for Lumina at the conference.)

Experts, though, have safety and ethical concerns: Despite earlier efforts by Oragenics, the treatment has never successfully moved through human clinical trials. “Without human trials, you really can’t determine whether it’s safe or efficacious,” said Jennifer Kuzma, a professor and co-director of the Genetic Engineering and Society Center at North Carolina State University. In fact, it’s possible it could do the opposite of its original intention: She noted that subtle changes in the oral microbiome might lead to more cavities or other problems.

There’s also no data about whether it could spread between people, which brings up questions of informed consent. If someone doesn’t want to risk taking the untested bacteria, but kisses or shares spoons with someone who got the product, would it be transmitted? No one is quite sure.

Although Lantern Bioworks is bringing Lumina to market as a cosmetic product, precisely how it should be categorized isn’t entirely obvious, Kuzma points out: “The regulatory system isn’t 100 percent clear on this.”


The human mouth contains hundreds of species of bacteria that function together in a community — an oral microbiome. A healthy bacterial balance keeps teeth and gums in good shape.

Cavities are caused by acid-producing bacteria. Several kinds of oral bacteria can make acid, explained Jonathon Baker, an assistant professor of dentistry at Oregon Health & Science University. But one bacterium, Streptococcus mutans, especially wreaks havoc because it can make both acid and biofilms, including dental plaque. That sticky coating traps acid on teeth, eroding tooth enamel and creating cavities.

In the 1980s, Hillman discovered a naturally occurring version of S. mutans that secretes the antibiotic mutacin 1140. Because mutacin broadly kills other species of bacteria, he realized it could potentially outcompete other harmful strains. (It’s not known how many people naturally have mutacin-producing S. mutans in their mouths; Hillman found this version in one sample out of 115.)

An electron microscope image of plaque-forming bacteria (red) on the enamel of a child’s tooth. Dental plaque is a biofilm that forms on teeth, which can then trap acids that cause tooth decay. Visual: Steve Gschmeissner/Science Photo Library via Getty Images

To make sure the bacteria wouldn’t cause cavities itself, Hillman genetically altered it to metabolize sugar in such a way that it produces alcohol instead of tooth-damaging lactic acid, like other cavity-causing Streptococcus strains do. Bacteria often swap genetic material, so he also tweaked the strain to prevent it from taking genes from other bacteria; other bacteria can still take genes from the genetically modified Streptococcus.

Hillman announced the new strain, called BCS3-L1, in 2000. Around that same time, Oragenics sought to begin a clinical trial. But due to concerns that the bacteria could be transmitted between people, have unintended consequences, or revert back to a cavity-causing strain, the company told The New York Times in 2004, the Food and Drug Administration put constraints on the trial, which was then never completed.

Hillman continued his research: A 2009 study showed that his bacteria appeared to colonize rats’ mouths and outcompete other Streptococcus strains that can contribute to tooth decay. But studies have been limited since, and Hillman and Oragenics eventually abandoned the project. About 12 years ago, he retired.

Silverbook picked up where Hillman left off: The genetically modified version of Streptococcus mutans is the basis of Lumina. After considering whether to market it as a cosmetic product, as teeth whiteners are, or as a probiotic, which falls under FDA regulation as a dietary supplement, Silverbook decided to go the cosmetic route. In the U.S., only drugs and medical devices must go through the strict process for the FDA to deem them safe and effective.

The FDA did not provide direct comment in response to a list of questions sent by Undark. Courtney Rhodes, an FDA spokesperson, did, however, point to the agency’s website which notes that drugs are defined by their intended use for “diagnosis, cure, mitigation, treatment, or prevention of disease,” and that mismarketing a product is against the law.

Lumina isn’t the first genetically engineered bacteria to hit the market: A company called ZBiotics launched a hangover preventive probiotic in 2019. The small drink contains Bacillus subtilis bacteria, common in other probiotic blends, but with an added gene that helps break down acetaldehyde, a byproduct of alcohol linked to headaches. (There is no published evidence that it helps with hangovers, nor colonizes the gut — there’s only a small toxicity study in rats.)

Lumina is different, though, in that it’s a modified version of what is technically a pathogen that causes dental decay, said Paul Jensen, a biomedical engineering professor who studies oral microbiology at the University of Michigan. Other probiotic supplements are “generally regarded as safe,” Jensen said. “They’re usually in our food to begin with. We know that they’re not pathogens.”

When asked about concerns that distributing a modified bacteria could potentially cause harm, Silverbook responded, “I think that this is not the kind of air-quotes pathogen that will make anything worse.”

Hillman’s goal, was to make “an affordable product that helps prevent a very painful disease,” he said, “but, you want it to be safe and effective.” When asked if more research is needed to determine its safety and effectiveness, he responded “I was certainly always planning to do more studies,” but declined to comment further.


Silverbook sees his product as a way to save people time and money: Dental care costs $136 billion a year in the U.S. according to the Centers for Disease Control and Prevention. Untreated dental infections can also be dangerous, “and there’s plenty of people who, for whatever reason, have a lot of trouble going to the dentist at all,” he said. “It would be really nice to have something that helps with that.”

Silverbook stressed that he is not making a medical claim — a key strategy, he said, in terms of regulation. “A lot of our regulatory system is based on claims, and if you’re really careful about not making a disease treatment claim, then you can get around the drug safety and efficacy trials,” said Kuzma, the North Carolina State University professor.

Clinical trials in the U.S. are especially difficult to carry out, said Jeff Banas, a professor and microbiology researcher at the University of Iowa College of Dentistry, because they are expensive, take time, and face stricter guidelines.

“If we do a clinical trial, then we are a drug and we cannot sell it unless I have half a billion dollars and 10 years,” Silverbook said.

Scott Aaronson, a theoretical computer scientist and professor at the University of Texas at Austin, volunteered to take Lumina after reading about it on a blog, and got it during a trip to Berkeley, California. He had lost trust in the FDA during the pandemic, such as when the agency delayed the rollout of Covid tests. When he heard that Lumina might help with cavities, Aaronson “was completely ready to believe that if something like this existed, then it would not have been approved by the FDA.”

“I gave this a try simply because it was fast and easy,” he wrote in an email to Undark. “And the downside risk seemed negligible.”


Jensen, the biomedical engineering professor, cautions that more research is needed to show that genetically engineered microbes can improve oral health and don’t have unintended side effects.

The antibiotic in Lumina, he noted, could potentially wipe out other Streptococcus species that are associated with good oral health. And there are other microbes at play that determine gum health. “They’re not the same bacteria that cause tooth decay,” he said. “But you have to be worried about messing up those communities at the same time.”

Lumina Probiotic is applied to the teeth much like a toothpaste, which Lantern Bioworks says inoculates the mouth with a type of bacteria that normally can cause tooth decay. This strain of the bacteria, however, is genetically engineered to avoid making acid and also to produce an antibiotic that kills harmful bacteria.

Visual: Courtesy of Aaron Silberbook

Additionally, people swallow about a liter of saliva every day, meaning the S. mutans’ antibiotic could end up in the intestine, potentially disrupting the gut microbiome, Jensen said. And because Lumina produces alcohol as a byproduct, it’s possible that might have an impact too, though the amounts are tiny and it’s hard to know without more research, he added.

In an email to Undark, Silverbook wrote that the company has been following the “fifty or so” people who have volunteered to take Lumina, and that no adverse events have been noted so far. Their follow-ups, according to Silverbook, consist of a self-reported survey and taking swabs to track whether S. mutans has successfully colonized the mouth. “We haven’t yet decided how long the follow up will be,” Silverbook wrote in another email, “but we anticipate colonization of the mouth to take about two years.” Regarding concerns about the gut microbiome, he wrote that Lumina “isn’t especially intended to be swallowed.”

Given the lack of evidence, Jensen said, “I don’t think I would take it.”

Quite a few oral probiotics have been tested in clinical trials as a solution for better oral health, though none of those are genetically modified. These products aim to add beneficial bacteria to the mouth. For instance, ProBiora, a chewable oral probiotic already available in the U.S., showed a modest reduction in cavities in children in one clinical trial. (ProBiora3, the bacterial blend in the tablets, was developed by Hillman at Oragenics.)

The Lumina microbe, though, was intended to be a kind of oral replacement therapy, so that the genetically modified bacteria would fight and overtake bad bacteria. Replacement therapy, Hillman said, “is doing what nature would eventually do given enough time. Pathogens, especially organisms that live with us on a day-to-day basis, do not want to harm their host. It’s contrary to their own self-interest.”

Though the idea isn’t new, no one has made it work yet. Banas said that 10 to 20 years ago, “it seemed like every grant application or manuscript justified their work by saying, well, this can be used for replacement therapy.” But he pointed out that so far, the field hasn’t seen any replacement strategies come to fruition. He’s currently screening thousands of oral microbe strains for potential probiotic properties to develop an oral probiotic for children.

Some experts are skeptical that introducing bacteria could successfully colonize adult mouths. Once the oral microbiome is established, it’s hard to change, said Isamar Rivera-Ramos, a pediatric dentist and dentistry professor at the University of Rochester — though not impossible.

Indeed, Hillman said it’s not easy to introduce new bacteria into someone’s mouth — his team was “uniformly unsuccessful” until they found the naturally occurring strain that makes mutacin 1140. Decades ago, Hillman introduced that strain into his own mouth, and he said it was still there the last time he checked before he retired. He added, though, that he never put the genetically modified version in his mouth, or anyone else’s.

Jensen, Baker, and Kuzma also expressed concern about the potential for the bacteria to be transmitted between adults, as well as children, especially given the lack of relevant data. People acquire their oral microbiome as children from caregivers and other close contacts, so if a new microbe could colonize an adult’s mouth, it could spread to their child.

Baker said studies show that microbes transfer within families and cohabitating people, and noted that “it’s definitely possible” for Lumina to spread. And according to Jensen, S. mutans has “been passed from human to human since it became a species. So it’s obviously very good at moving between humans; otherwise, it’d be an evolutionary dead end.” Hillman, though, noted that introducing microbes for oral replacement requires 100 to 1,000 times more than would be exchanged in normal interactions.

Silverbook told Undark that he is not overly concerned about the raised safety and ethical concerns, though he acknowledged some risks, such as the likelihood for it to spread to children: “If you are pregnant, breastfeeding, or expecting to become pregnant, consider carefully before sticking our magic tooth sauce onto your teeth.”


Christina Szalinski is a freelance science writer with a Ph.D. in cell biology based near Philadelphia.

Read the whole story
Share this story
Delete

The Amazonian town putting world cities to shame

1 Share
Read the whole story
Share this story
Delete

Volkswagen workers vote to unionize in major win for organised labour

1 Share
Read the whole story
Share this story
Delete

Philosopher Daniel Dennett dead at 82 | Ars Technica

1 Share

World renowned philosopher Daniel Dennett, who championed controversial takes on consciousness and free will among other mind-bending subjects, died today at the age of 82.

(Full disclosure: This loss is personal. Dennett was a friend and colleague of my spouse, Sean Carroll. Sean and I have many fond memories of shared meals and stimulating conversations on an enormous range of topics with Dan over the years. He was a true original and will be greatly missed.)

Stunned reactions to Dennett's unexpected passing began proliferating on social media shortly after the news broke. "Wrenching news. He's been a great friend and incredible inspiration for me throughout my career," the Santa Fe Institute's Melanie Mitchell, author of Artificial Intelligence: A Guide for Thinking Humans, wrote on X. "I will miss him enormously."

"He was a towering figure in philosophy and in particular in the philosophy of AI," roboticist Rodney Brooks (MIT, emeritus) wrote on X, bemoaning that he'd never replied to Dennett's last email from 30 days ago. "Now we have only memories of him.

A 2017 New Yorker profile described Dennett as "a cross between Darwin and Santa Claus," with "a fluffy white beard and a round belly." That jolly appearance was accompanied by an intellectual ferocity—generously embellished with his sparkling wit—as he battled such luminaries as Stephen J. Gould, John Searle, Noam Chomsky, David Chalmers, Roger Penrose, and Richard Lewontin, among others, over consciousness and evolution, free will, AI, religion, and many other topics.

Dennett's many books, while dense, nonetheless sold very well and were hugely influential, and he was a distinguished speaker in great demand. His 2003 TED talk, "The Illusion of Consciousness," garnered more than 4 million views. While he gained particular prominence as a leader of the "New Atheist" movement of the early 2000s—colorfully dubbed one of the "Four Horsemen of New Atheism" alongside Richard Dawkins, Christopher Hitchens, and Sam Harris—that was never his primary focus, merely a natural extension of his more central philosopical concerns.

David Wallace, historian and philosopher of science at the University of Pittsburgh, offered Ars Technica this succinct summation of Dennett's extraordinary influence:

To me, Dan Dennett exemplified what it means to do philosophy in an age of science. He once said that there was no such thing as philosophy-free science, only science that didn’t interrogate its philosophical assumptions; equally, he saw more deeply than almost anyone that the deepest traditional questions of philosophy, from free will to consciousness to metaphysics, were irreversibly transformed by modern science, most especially by natural selection.

His approach, as much as his own towering contributions, has inspired generations of philosophers, far beyond cognitive science and the philosophy of mind (his ideas have been influential in the interpretation of quantum theory, for instance). He was one of the great philosophers of the last century, and one of the very few whose work has been transformative outside academic philosophy.

"Dan Dennett was the embodiment of a natural philosopher—someone who was brilliant at the careful conceptual analysis that characterizes the best philosophy, while caring deeply about what science has to teach us about the natural world," Johns Hopkins University physicist and philosopher Sean Carroll told Ars. "At the same time, he was the model of a publicly-engaged academic, someone who wrote substantive books that anyone could read and who had a real impact on the wider world. People like that are incredibly rare and precious, and his passing is a real loss."

Born in Boston in 1942, Dennett's father was a professor of Islamic history who became a secret agent for the OSS during World War II, posing as a cultural attaché at the American Embassy in Beirut. Dennett spent his early childhood there until his father was killed in a plane crash while on a mission to Ethiopia. Dennett, his mother, and two sisters returned to Boston after that, and his family assumed he would attend Harvard just like his late father. But after graduating from the Phillips Exeter Academy, Dennett opted to attend Wesleyan University instead—at least until be came across Harvard logician and philosopher W.V.O. Quine's 1963 treatise, From a Logical Point of View.

Dennett ended up transferring to Harvard to study under Quine and become a philosopher, initially intent on proving Quine wrong. By the time he was a graduate student at Oxford University, he was known among his fellow students as "the village Quinean." In his 2023 memoir, I've Been Thinking, Dennett traced his interest in applying his field to questions of science began during this period. He recalled experiencing the universal sensation of one's hand falling asleep and feeling like an alien thing, rather than part of one's own body. He wondered what was going on in the body and the brain.

"The other philosophers thought, that’s not philosophy. I said, well, it should be," he told Tufts Now last year. "So I started learning. I didn’t even know what a neuron was back then in the early ’60s, but I soon learned. I was lucky to get in on the ground floor of cognitive neuroscience. Some of the early pioneers in that field were my heroes and mentors and friends."

Dennett's first academic position was at the University of California, Irvine, and a revised version of his doctoral thesis became his first book: 1969's Content and Consciousness. He moved to Tufts University in 1971, where he remained for the rest of his career. One of Dennett's earliest collaborators was Douglas Hofstadter, author of the bestselling Gödel, Escher, Bach: an Eternal Golden Braid, who called Dennett "a lodestar in my life" in an email [quoted with permission] to colleagues after hearing of the latter's death:

Dan was a deep thinker about what it is to be human. Quite early on, he arrived at what many would see as shocking conclusions about consciousness (essentially that it is just an emergent effect of physical interactions of tiny inanimate components), and from then on, he was a dead-set opponent of dualism (the idea that there is an ethereal nonphysical elixir called “consciousness”, over and above the physical events taking place in the enormously complex substrate of a human or animal brain, and perhaps that of a silicon network as well).  Dan thus totally rejected the notion of “qualia” (pure sensations of such things as colors, tastes, and so forth), and his arguments against the mystique of qualia were subtle but very cogent.

Dennett was a a confirmed compatibilist on the fiercely debated subject of free will, meaning that he saw no conflict between philosophical determinism and free will. "Our only notable divergence was on the question of free will, which Dan maintained exists, in some sense of 'free,' whereas I just agreed that 'will' exists, but maintained that there is no freedom in it," Hoftstadter recalled.

Johns Hopkins philosopher Jenann Ismael recalled corresponding with Dennett after her own book on free will, How Physics Makes Us Free, was published in 2016.  She had not yet met Dennett, but his work was naturally a significant influence, even though her book was largely critical of his stance on the subject. Ismael opened her book by discussing Dennett's fictional short story, "Where Am I?", calling it "the best of piece of philosophical fiction ever written." (Check out this short film based on the story, starring Dennett himself uttering such immortal lines as, "They made a sparkling new vat for my brain.")

Dennett read her book and emailed Ismael with a few notes—not about how he felt she'd misrepresented his views (which he deemed of "no matter") but correcting her mistakes about the plot of his short story. "It turns out I got the story wrong," Ismael told Ars.  "I'd read it so long ago, I just embellished it in my head and embarrassingly never realized. Where I criticized him in my book, he wasn't as keen to correct me as he was excited to talk about the ideas."

She found him to be filled with infectious warmth. "It was true that he could suck the air out of a room when he entered and even sitting at a round dinner table, he somehow became the center of it, he took possession of the discussion," said Ismael. "But he also paid close attention to people, read voraciously, listened to and heard what others were saying, taking what he could and disseminating what he learned. He had immense curiosity and he wanted to share everything that he learned or liked."

In his later years, Dennett wasn't shy about sounding the alarm regarding AI, even writing an article for The Atlantic last year on the topic about the dangers ahead, particularly with the advent of large language models like ChatGPT.  "The most pressing problem is not that they’re going to take our jobs, not that they’re going to change warfare, but that they’re going to destroy human trust," he told Tufts Now. "They’re going to move us into a world where you can’t tell truth from falsehood. You don’t know who to trust. Trust turns out to be one of the most important features of civilization, and we are now at great risk of destroying the links of trust that have made civilization possible."

Dennett was not one to traffic in false modesty over his many accomplishments and always evinced a strong degree of self-confidence, fondly recounting in his memoir of the time fellow philosopher Don Ross wryly observed, "Dan believes modesty is a virtue to be reserved for special occasions."

His myriad interests weren't limited to the academic. Dennett loved art, music, sailing, pottery, trout fishing, windsurfing, ran his own cider press, and made his own Calvados on a Prohibition-era still. He could call a square dance, whittle a wooden walking stick, and was fond of pondering knotty philosophical questions while driving his tractor on his 200-acre farm in Blue Hill, north of Boston, which he bought in the 1970s. (He sold the farm around 2014.)

"Dan was a bon vivant, a very zesty fellow, who loved travel and hobnobbing with brilliance wherever he could find it," Hoftstadter wrote in his tribute.  "In his later years, as he grew a little teetery, he proudly carried a wooden cane with him all around the world, and into it he chiseled words and images that represented the many places he visited and gave lectures at. Dan Dennett was a mensch, and his ideas on so many subjects will leave a lasting impact on the world, and his human presence has had a profound impact on those of us who were lucky enough to know him well and to count him as a friend."

Ismael recalled him sending her YouTube videos of "swing dancing and silly outfits" during the pandemic, his emails littered with colorful emojis. He was "a strange man, who didn't take himself as seriously as you might think," she said. "I really loved him, loved his spirit, his generosity, the expansiveness of his thinking, his delight in ideas, and his great good cheer. Philosophically, I think he had true greatness. It seems impossible he is gone."

Read the whole story
Share this story
Delete

NASA's Chandra X-ray Observatory slated for budget cuts after 25 years

1 Share
Read the whole story
Share this story
Delete

Help us invent CSS Grid Level 3, aka “Masonry” layout

1 Share

If you’ve been making websites for years, you know how frustrating it was to lay out a web page with CSS floats. Managing sizes and placement was tedious and time consuming. Being creative was often impossible. CSS Grid greatly eased that pain with Grid Level 1 in 2017, and now with Grid Level 2, aka Subgrid. But even with the powerful CSS of today, not every layout imaged by designers is possible. In fact, when CSS Grid shipped, one of the most commonly asked questions was: “how do I write CSS to accomplish a masonry layout?” Sadly, for the last seven years the answer has been — you can’t.

What is masonry layout?

What do we mean by the term “masonry layout”? Basically it’s the pattern seen in the following image — where content packs together like a brick or stone wall. That’s where it gets the name “masonry”. It’s also frequently called “waterfall layout”, as a metaphor for how content flows down the page like a waterfall.

Two dozen photos of different aspect ratios laid out using a "masonry" pattern

This layout is popular because it solves a few problems that other layouts do not.

  1. It allows for content of different aspect ratios, and avoids the need to crop or truncate content in order to turn everything into uniform rectangles.
  2. It distributes content across the page (instead of flowing down each column, one by one). This follows the natural reading order as you scroll the page. And it lets the website lazy-load additional content at the bottom without moving existing content around.

This layout creates uniformly-sized columns, without any rows. It’s quite possible that because this layout has required JavaScript, anything more creative or complex has been too hard to pull off — and we’ve been left with an expectation that masonry layout should only ever be a simple pattern with uniformly-sized columns. Let’s see what’s possible if we build it into CSS instead.

Inventing masonry

A mechanism in CSS for “masonry layout” was first proposed by Mozilla in January 2020 as an extension of CSS Grid, and implemented as an experiment behind a flag in Firefox Nightly. In 2022, Apple started implementing this CSS Grid Level 3 proposal in Safari Technology Preview (where it’s currently on by default), and we’ve been helping to move the web standard along to reach maturity.

However, there are big questions still being asked about how CSS should handle masonry-style layouts. Some people remain skeptical that this capability should be part of CSS Grid, and want it to instead be its own separate display type. Others are questioning whether or not this kind of layout is needed on the web at all — they aren’t sure that well-known websites will use it. With such fundamental disagreements at play, no browser can ship. We must first come to consensus in the CSS Working Group.

This is where we need your help. We’d like real-world web designers and developers to weigh into the discussion, and express what it is that you want. Your input really can make a difference.

In this article, we’ll walk through how the CSS Grid Level 3 proposal works, and how you can use its new capabilities. We’ll show you why we believe these features should be part of CSS Grid, and explain what the alternative would be if the CSS Working Group creates display: masonry instead. And then, we’ll ask you to join the debate to help move us forward. Please do read to the end.

Four demos

To show why we at Apple believe this capability should be part of CSS Grid, we created four demonstrations. If you’d like, try them yourself at webkit.org/demos/grid3. View these demos in a browser that supports Grid Level 3 — currently Safari Technology Preview or Firefox after you’ve turned on the feature flag.

Note there’s a control panel for each demo, with the relevant layout code printed to the page. Turn on “Number items” to see the relationship between the HTML order of content and the layout placement of that content.

Screenshot showing the controls of the demo — here with the numbers turned on

Each demo has a multitude of variations. Switch between variations from the dropdown menu, which changes only the CSS. The HTML stays the same.

Screenshot showing the controls of the demo — here with the dropdown of various alternative layouts showing

Creating a classic masonry / waterfall layout

First, let’s take a look at how to build a classic masonry/waterfall layout. In this gallery of photos, each image is wrapped with a figure element, and the figures are direct children of a main element.

<main>
  <figure><img src="photo-1.jpg"></figure>
  <figure><img src="photo-2.jpg"></figure>
  <figure><img src="photo-3.jpg"></figure>
</main>

We start by applying display: grid to the main element to create the Grid container. Then we can define grid-template-columns however we’d like.

In this case, let’s use grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)) to ask the browser to repeat a looped definition to create a set of flexible columns that are each of a minimum of 14rem. This results in uniformly-sized columns, typical of the classic masonry/waterfall layout. The gap: 1rem; rule creates a 1rem-wide space between the items — both between the columns, and horizontally between items.

And then, we’ll define the “rows” with the masonry value. (It’s likely the name of this value will change before this ships in browsers — more on that at the end of this article. For now, masonry is what works.)

main { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
  grid-template-rows: masonry;
}

The grid-template-rows: masonry rule tells the browser: “Please do not create rows. Instead pack the content into a masonry/waterfall-like pattern.”

That’s it! In four lines of CSS, with zero media queries or container queries, we’ve created a flexible layout that works on screens of all sizes. And there’s no need to crop content to force everything into same-sized boxes.

masonry layout of photos

In graphic design, a layout that has uniformly-sized columns and no rows is often called a “symmetrical columnar grid”. For centuries, columnar grids were the dominant type of grid used in page design.

Leveraging Grid’s full power to define columns

Now let’s dive into the advantages of combining the full power of CSS Grid with masonry/waterfall packing. CSS Grid provides many options for defining grid our columns. Using fr units to create a symmetrical grid is only one option of many.

How could these possibilities be used for a masonry/waterfall-style layout? Let’s try mixing fixed-sized columns with flexible columns. We could make the first and last column fixed-sized, while the middle columns are flexible, changing in both size and number.

Specifically, the first and last columns are exactly 14 characters wide, while the middle columns are flexible (at least 28 characters wide) and change in number to fill the available space.

main { 
  display: grid;
  grid-template-columns: 14ch repeat(auto-fill, minmax(28ch, 1fr)) 14ch;
  grid-template-rows: masonry;
  gap: 1rem;
}

This is just one of many, many possibilities.

CSS Grid allows for a lot of creativity with its options for defining grid tracks:

  • fixed sizes defined in any unit (px, em, rem, cqi, lh, ch, ic, cap, vw, svh, and many more)
  • max-content and min-content
  • the full power of fr units
  • minmax() functions
  • %-sized
  • auto

These options in CSS Grid allow you to create something much more dynamic and flexible in interesting ways. You can create two stages of flexibility, because the fr-unit sized columns grow and shrink in a separate stage from the minmax()-sized columns. The max-content and min-content values let you size the columns based on the content size, rather than sizing the content based on the column size. The fr units can easily be used to create compound or asymmetrical grids, where the columns are different sizes. The options are endless.

By adding the ability to pack content in a masonry/waterfall pattern to CSS Grid, we maintain the full power of Grid for defining our columns in whichever manner we like.

For example, let’s use grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr) to create a pattern of alternating narrow and wider columns, where all the columns are flexible. More columns are added when there’s space. And there’s always an odd number of columns, ending with a narrow one.

three web browser windows next to each other, showing how the layout adjusts for narrow, medium and wider windows

Even when we define columns using only the simple fr unit, the full power provided in CSS Grid means different columns can be set to different sizes. For fun, let’s use fr units to define a set of columns sized to inject the vibes of the golden ratio by using the Fibonacci sequence in grid-template-columns: 1fr 1fr 2fr 3fr 5fr 8fr;

layout of photos where the columns on the left are very narrow, getting bigger and bigger as them move to the right, in a fibonacci sequence

In a more practical example, let’s use max-content when defining our columns. Content-based sizing is an incredibly power feature of CSS Grid. This demo of a mega menu layout uses grid-template-columns: repeat(auto-fill, minmax(max-content, 30ch)); to ensure that every column is big enough to fit every link without wrapping text.

a menu with a ton of links, like in a website footer, laid out with Grid Level 3

Mega menus have been hard to code, especially across multiple screen sizes. With CSS Grid Level 3, it becomes incredibly easy. A few lines of code creates a dynamic layout which adds and removes columns one at a time as space allows — without any media/container queries, and with wrapping prevention.

Many of these examples could never be created with masonry as a separate display type. The discussion of display: masonry is to only allow symmetrical columns (columns that are the same size as each other), much like multicolumn layout does today.

Leveraging Grid’s ability to let content span columns

CSS Grid also lets us span items across multiple columns. Let’s use that capability to see what interesting options might emerge. How about making every 5th image span two grid columns, while the rest of the images are span one column.

same photo layout, now with random photos being bigger

What if instead, we put a wider class on specifically on images that have a wider aspect-ratio, to make those images span multiple columns. We can also change the styling a bit, making the corners square instead of round, and reducing the grid gap to zero. This gives us a different way to pack photos of different aspect ratios together.

another layout of image, this time where wider images are wider

We also experimented with combining the classic masonry/waterfall layout of photos with View Transitions. When a user clicks/taps on any photo, it grows to span multiple columns. The browser automagically animates the transition. (This demo requires Safari Technology Preview 192 or later.)

These variations of the Photos and Mega Menu demos are just a small taste of all of the many possibilities you get when leveraging the full power of CSS Grid in the column direction, while simultaneously turning off rows.

Columnar vs. Modular Grids

What happens when we keep experimenting? Let’s let go of thinking about “masonry”, and start imagining Grid Level 3 purely as an expansion of Grid. At its core, CSS Grid Level 3 provides a mechanism for turning off rows. It lets us create a columnar grid — a grid that’s made up of columns alone.

By contrast, a modular grid is a grid where everything is lined up in both columns and rows. They became popular in the 20th century during the dominance of modernism in graphic design. CSS Grid Level 1 is really good at making modular grids… that’s what it wants to do. In fact, float-based layouts also encouraged the creation of modular grids on the web, since you had to make all your content the same height to get your floats to clear. Images need to be the same aspect ratio. Text has to be the same length. This is often accomplished on the back-end with policies enforced by the content management system, or on the front-end by CSS that truncates/crops the content.

It’s incredible common for websites to do some variation of this sort of modular grid, laid out here with CSS Grid Level 1.

layout of text, in ridged sets of boxes, row after row, all the same height

Of course, this example is overly simplistic. The article ledes look bare with no teaser images. The uniformity is so strict and formal, the design lacks life. Real websites find other ways to breathe life back into the design.

But what if the layout itself could also provide some vitality and interest? What will happen if we use CSS Grid to create a columnar grid as easily as it creates a modular grid? What if we don’t truncate content, and instead let it be the size that it wants to be — and get the layout to work for the content, rather than forcing the content to work for the layout?

A classic masonry/waterfall layout with various lengths of text looks like this, which is already more engaging since a user can read more about each article:

same article teaser text, this time laid out in columns set with masonry

Although, that’s still a bit visually repetitive. Symmetrical columnar grids often are. We need the rest of the power of CSS Grid to do something more interesting. Let’s make the latest article much bigger, and have it span four columns. A handful of other recent articles can be medium-sized and span two columns. While the older content is smaller, spanning one column.

same text, this time laid out with much more dynamic use of 'masonry-style layout plus spanning columns

Now this otherwise visually boring text is starting to look fairly lively. If we were to add images to each of these articles, it would be it even more dynamic.

Let’s experiment with mixing images and text together on a webpage for a museum. The first grid item is a header that introduces the museum, and provides navigation to other resources. The rest of the content consists of pieces of artwork and their information: title, artist, year, medium, catalog number and location.

Because the paintings are gorgeous, the content looks pretty great in a classic masonry/waterfall layout.

layout of cards, each with a painting and text

Let’s see what else we can do by utilizing two more powerful features of CSS Grid — subgrid and explicit placement.

Using subgrid and explicit placement

The functionality provided by subgrid in CSS Grid Level 2 is incredible, and it’s finally supported in most browsers.

Instead of listing the painting’s metadata in a single left-aligned column, let’s see how we might better use the available space. By using subgrid, we can put the year and catalog number on the right of each card — and line up this data for one painting with the same data for the other paintings.

close-up of this layout, with the Grid Inspector showing, with lines marking columns showing how subgrid works

By adding this new functionality to CSS Grid Level 3, we get the benefit of existing developer tools. You can use the Grid Inspector in Safari Technology Preview today as you try out grid-template-rows: masonry.

If masonry is its own display type, and not part of CSS Grid, it will not get the benefit of subgrid.

We can also use the power of CSS Grid Level 1 to explicitly place the header into the last two columns, moving it to the top right corner of the page with grid-column: -3 / -1.

In just a few lines of layout code, we are using the full power of CSS Grid Levels 1, 2, and 3 to create flexible columns that change in number to accommodate the available size — without using any media queries or container queries.

Hopefully you can see the advantages of fully combining a mechanism for masonry/waterfall layouts with CSS Grid — providing many more creative possibilities than masonry alone.

The Debate

So let’s get into the debate that’s been blocking the CSS Working Group from moving forward. Our hope is that web designers and developers chime in (post to social media, write blog posts) with your thoughts about which direction CSS should take.

Some people, including those of us at Apple, like having “Masonry” be part of CSS Grid. We believe this functionality is a mechanism to expand CSS Grid — allowing it to finally create columnar grids as well as modular grids. And we want this functionality to be mixed with all the other features of Grid, including the powerful options for defining a columns, track spanning, explicit placement, and subgrid.

Other people instead believe Masonry should be its own separate display type. At first glance, defining Masonry with a new display type might make a lot of sense. You do get a tidy separation between layout types.

display: block;
display: inline;
display: flexbox;
display: grid;
display: masonry;

The CSS Working Group has not discussed how the syntax for a separate Masonry display type would work, but perhaps it would be patterned after Multicolumn layout.

main { 
  display: masonry;
  columns: 28ch;
}

Or perhaps the syntax would be patterned after Grid, but with significant limitations:

main {
  display: masonry;
  masonry-columns: repeat(5, minmax(28ch, 1fr)); 
                   /* where only one repeating width is allowed */
}

Either way, it’s clear that advocates of this option want Masonry to be limited to a symmetrical grid — where all the columns are the same size as each other. None of the rest of CSS Grid’s track sizing capabilities would be allowed.

Making masonry a simple and separate layout type would avoid the work necessary to keep Grid and Masonry working together in combination — both now and in the long term. Doing this would simplify the layout model, make it easier to implement in browsers, reduce the potential for performance traps, and allow the feature sets of Grid and Masonry to diverge.

Conversely, we believe the effort needed to add this capability to CSS Grid is worth the many benefits to be had. The CSS Grid Level 3 specification has already been written, and implemented in two browser engines. And yes, while making CSS Grid more complex will make it harder to extend in the future, we believe there’s an advantage to having these two types of grid layouts intertwined. This way the CSS Working Group will always define all new additions for both modular and columnar grids. There won’t be something added to display: grid that will be left out of display: masonry, or vice versa. For example, many developers want CSS Grid Level 4 to provide a mechanism for styling grid areas and grid lines — perhaps a way to add a background color to a track, or create a rule line in a gap. It’d be great to ensure that will work for both modular and columnar grids from Day 1.

Another argument made by advocates of display: masonry is that that masonry is conceptually a fundamentally different layout type from CSS Grid, and therefore should have its own display type. They often describe CSS Grid as inherently being about “lining things up in two-dimensions”, and since masonry only lines things up in one dimension, “it’s not a grid”. (In fact, some have advocated that Masonry is more like Flexbox, since “both line things up in one direction”.)

In many ways, your perspective on this question might depends on what you imagine a grid is.

What is a grid?

Grids are an incredibly important aspect of graphic design. Grids are used to line up text, images and other content in a regular pattern. They help readability and usability by making things predictable.

You can trace their use through thousands of years of history.

two photos of book pages, showing historic columnar layouts from long ago
[Left] Antoine Vérard published a French translation of Boccaccio in 1498. Seen in Thirty Centuries of Graphic Design, by James Craig and Bruce Barton, 1987. [Right] A Russian illustrated sheet proclaiming that ‘Hops are head above all other fruit’. Seen in Books: A Living History by Martyn Lyons, 2011.

It wasn’t until the 20th century that European and American modernists started promoting the idea that “proper” graphic design grids should line content up in both directions — in rows as well as columns.

spread from a book, showing two different newspaper home pages, where articles line up in a modular grid — in both row and column directions
Massimo Vignelli is especially well-known for promoting the idea that lining things up in both columns and rows is a superior practice of graphic design. Two examples from The Vignelli Canon, 2010.

Even today, there is a lot of debate about which type of grid is the best grid or the only legitimate grid. Many designers claim a 12 column grid is the only correct way to design a web page — or 12 columns for “desktop”, 8 columns for “tablet”, and 4 columns for “phones”. At times designers have gotten quite religious about their ideas of what a “proper grid” looks like.

Mark Bouton argued for years that symmetrical columnar grids are incredibly formulaic and boring. He promoted the use of asymmetrical compound grids in design for the web. Today, luckily CSS Grid Level 1 makes it incredibly easy to create both asymmetrical grids and compound grids, giving designers the freedom to create what they want. But only if they also want all their grids to be a modular grids.

Both modular and columnar grids are in fact grids. And CSS Grid deserves the ability to also create columnar grids.

photograph of an open book, showing many many hand-drawn diagrams of how different layouts can use different numbers of columns
Ideas for designing columnar grids, in Editing by Design, by Jan V. White.

We believe there’s an opportunity for CSS to enable a rich history of design grids to come to the web — and would be greatly disappointed to see the new masonry feature limited to only allowing symmetrical columnar grids.

But what do you think?

We want to hear from you

This is where you come in. Try some demos of your own. Write about your thoughts on your own blog. Comment at the CSS Working Group in this issue.

  • Should “masonry”/“waterfall” be part of CSS Grid?
  • Do you want the capabilities to define a columnar grid with CSS Grid — to use subgrid, spanning, explicit placement, and all the many options for track sizing? Or do you only want the ability to define a classic masonry layout with equal-sized columns?
  • Will you use this? What might you create with it?
  • Do you have links to demos you’ve made? We want to see your ideas and use cases.
  • Are there things you want to do that you can’t do with this model?

Often, thinking about something theoretically and actually seeing it in use can be very different. To make sure the CSSWG gets the design of this feature correct, we need developers to gain some hands-on experience, and articulate your thoughts about what it’s like.

The WebKit team has been working on Masonry for a year and a half. It was first enabled by default in Safari Technology Preview 163 in February 2023. There’s a bit more polish needed, and details to work out (naming being one). But we would like to ship this feature soon. To do so, these fundamental questions need to be resolved.

Thank you for your help!

P.S. About the name…

It’s likely masonry is not the best name for this new value. Names in CSS are usually simple words that directly describe the result they create — like center, under, contain, clip, revert, ltr, always, break-word, hidden, allow-end, scale-down, wrap, smooth.

The word “masonry” is more of a metaphor, where the meaning has to be explained with a backstory. Such a term is harder to remember for developers who do not speak English. And arguably, the syntax could just as easily be grid-template-rows: waterfall instead, since that’s the dominant word for this layout used in certain regions, not masonry.

Plus, once you start to write a lot of code using this feature, it’s likely you’ll come to the realization that we did — this really isn’t about the layout used by Pinterest or other similar sites. This is a mechanism for telling the browser, “please create a grid, but without any rows.

Perhaps the best syntax could be grid-template-rows: none; to convey “please do not give me any rows”. Sadly, it’s too late to use this name, because none is the default value for grid-template-* and means “please give me only implicit rows, no explicit ones”.

Instead we could use the name off to convey “please turn off the grid in the row direction, and give me only columns”.

main { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  grid-template-rows: off; 
}

The CSSWG is debating this name in this issue. If you have ideas or preferences for a name, please join that discussion.

Meanwhile, masonry is the value that is currently implemented in Safari Technology Preview, since that’s what the Editor’s Draft currently uses. And so that’s what we used in our demos above, and what you should use in yours. But do expect the name of this value to change in the future. And perhaps prepare for a future where we call this “columnar grid” or “Grid Level 3” instead of “Masonry”.

Read the whole story
Share this story
Delete
Next Page of Stories