The eternal grid UI problem: auto-adjusting to screen width while also honoring saved user settings
In apps with lots of tabular data (backoffice admin tasks, reporting, etc.), a common feature is to allow users to save their view settings for grids, such as which columns to show, column order, column width, and sorting. Unfortunately, this sometimes steps on the toes of another helpful feature for large grids: auto-expanding to fill up the available width in the viewport.
Imagine that when a user views a grid for which they haven't saved view settings, the grid uses "natural width" (column widths are set proportionally based on their content and the available viewport width). As soon as a user wants to change the width of a column, it seems to me that auto-width can no longer be used for the entire grid, instead using hard-coded widths. This creates a frustrating usability issue where the user is left wondering why the grid no longer sizes intuitively, and all the developers can say is "that's because you customized a column's width. You have to delete your customization". Not ideal.
How have you guys dealt with this issue? Is there a more elegant solution than this?
1 Reply
Are you talking about behaviour of elements in a container with
display:grid, or the <table> element? Because in either case, you can absolutely set one column to a specific width while leaving the others to resize accordingly. For grid layout, set the default column width to 1fr and then you can set specific grid columns to a fixed value. For tabular data, you can set table-layout: fixed on the table element and set widths on the <th> elements.
Check out https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Tables and/or https://css-tricks.com/snippets/css/complete-guide-grid/ — both discuss the specific use case you're describingMDN Web Docs
Styling tables - Learn web development | MDN
Styling an HTML table isn't the most glamorous job in the world, but sometimes we all have to do it. This article explains how to make HTML tables look good, with some specific table styling techniques highlighted.
Chris House
CSS-Tricks
CSS Grid Layout Guide | CSS-Tricks
Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.