网格是一个很好的表格，非常适合台式机或平板电脑等宽屏。但是，当在较小的移动设备上显示时，网格最多只能容纳几列。您是如何在应用程序中解决此问题的？
表堆栈模式听起来很有希望：https://responsivedesign.is/patterns/data-table-stack/ 但是我该如何使用Vaadin Flow来实现呢？是否有可能根据屏幕尺寸用项目列表交换网格？
答案 0 :(得分：4)
一种常见的方法是为移动设备和台式机分别设置列。
在移动设备或其他窄屏上，可能只有一列以堆叠方式出现。这对于模板渲染非常简单，并且模板沿着
<div>Name: [[item.name]]</div><div>E-mail: [[item.email]]</div>"
甚至可以将模板定义为Polymer模板Web组件，将其导入，并像这样设置模板渲染器
<mobile-column item="[[item]]"></mobile-column>
要切换列，可以添加一个调整大小的侦听器（最好是限制），例如按照here的定义。
MediaQuery插件对此也非常有用。我建议在服务器上切换可见性，以避免发送不必要的数据和在浏览器中进行不必要的渲染。
答案 1 :(得分：2)
我会接受媒体查询。这里有一个示例可以将它们包括在样式中：Media queries in Shadow dom
因此，例如，在宽度小于某个预定值的情况下，将visibility的网格设置为hidden，将list的设置为visible，反之亦然，需要的时候。
编辑：还有一个附加组件，可能有助于使用查询：Mediaquery