Using the grid component for setting max-width

[adamsilver]

Many (of our) pages are single columns but need a max width (100% width is hard to read).

Example:

There doesn't seem to be a concept in the DS for setting a max-width for major portions of the page content.

So far, we've used <div class="govuk-grid-column-two-thirds">. This works okay in larger viewports, but when you get to smaller viewports (before it switches to stacked columns) it's not ideal because 2/3 of a small screen is unnecessarily small.

A small additional thing is that when using the grid we need two <div>s when one would be all that's necessary to achieve max width over the page content.

I should note, that I could, of course, create my own “single column max width class” but wanted to raise here for discussion.

@nickcolley pointed me to Tachyon's measure helper which might be a good fit for the DS.

[timpaul]

Thanks for the suggestion @adamsilver. We'll be investigating enhancements to our grid system which would address this issue in the next 3-6 months, so I'll close it for now if that's OK

[edwardhorsford]

+1 For this. Most of my service's pages have a single column, but we want to limit the width for readability.

[edwardhorsford]

I created my own width modifier classes on a previous project, that worked well.

These set a max-width on elements rather than % width. So content / fields can be sized correctly for the content, and won't arbitrarily change size depending on the viewport width (except mobile, which is still 100%).

IMHO these produce more consistent pages and form fields that match the content.