4-column grid rendered as 2 columns with 1.12.0

[happz]

I noticed on my site first, after updating to 1.12.0 the following HTML rendered as two cards, the latter below the former:

<div class="grid grid-cols-4">
  <div class="grid-colspan-3 card game-summary">${render_game_summary(game)}</div>
  <div class="card">${render_game_report_legend()}</div>
</div>

Developer tools in the browser also showed just two columns in the grid. Before the update, cards were rendered on the same row, 3+1 easily fitting into 4 columns.

And while I'm not 100 % sure I remember it correctly, I think the same is happening in framework docs: check the attached picture, wasn't this a 4-column grid, as suggested by the example HTML below? No change of browser window or font led to 4 cards landing on the same row of the grid.

After reverting to 1.11.0, I got back the "3-column card and 1-column card on the same row" behavior in my site.

[mbostock]

The grid breakpoints haven’t changed in 1.12. They are still:

• 640px for two columns
• 720px for three columns
• 1080px for four columns

Only two columns are shown on the Framework docs by default because under the new (constrained) layout, the central column of text will not get wider than 864px (1440px max-width - 272px for the sidebar - 192px for the table of contents - 7rem = 112px for various padding).

If you hide the sidebar, the center column will be allowed to go wider, up to 1168px (1440px max-width - 192px for the table of contents - 5rem = 80px for padding).

There does seem to be a bug that the center column doesn’t go wider when the table of contents is suppressed. But even if we fix that, it won’t be quite wide enough (1072px < 1080px) to allow for four columns. I guess we could lower the 4-column breakpoint, though.

For what it’s worth, you also get two columns in version 1.11.0 at the same window width (1440px). There’s a tiny difference in layout (880px vs. 864px) but not enough to allow for four columns.

The difference in 1.11.0 is that at wider windows, the center column is allowed to get wider, which then gives enough space for more columns.

Whereas in 1.12, the center column is constrained and the layout does not widen beyond 1440px.

If you don’t want to constrain the center column, you could use the wide theme:

---
theme: wide
---

Alternatively you could override the maximum width:

<style type="text/css">

:root {
  --observablehq-max-width: 1680px;
}

</style>

[mbostock]

With the fix in 2ff8c4a and adding

---
toc: false
---

and removing ~1rem of padding somewhere, we could make 4 columns fit…