如何在 Vaadin Flow 中使用 CSS 网格替代 Framework 8 的 GridLayout？答案

【问题标题】：How to use a css grid in Vaadin Flow as replacement for Framework 8's GridLayout?如何在 Vaadin Flow 中使用 CSS 网格替代 Framework 8 的 GridLayout？
【发布时间】：2019-01-29 12:31:42
【问题描述】：

我正在尝试将现有的 Vaadin 8 应用程序迁移到 Vaadin 12，并且需要知道如何在 Vaadin 12 中重新创建 Vaadin 8 的 GridLayout 的功能。

根据Vaadin Docs，可以在 Vaadin 12 中将 GridLayout 替换为： “将 Div 与大多数浏览器支持的新 CSS 网格功能一起使用”

不幸的是，目前尚不完全清楚如何做到这一点。

假设我有一个 Vaadin 复合“HelloGrid”：

@StyleSheet("styles/hello-grid.css")
public class HelloGrid extends Composite<Div> {

   public HelloGrid(){

     // EDIT: This line is my solution to the question
     getElement().getClassList().add("hello-grid");

     Label labelOne = new Label();
     labelOne.addClassName("label-one");

     Label labelTwo = new Label();
     labelTwo.addClassName("label-two");

     add(labelOne);
     add(labelTwo);
   }
}

还有一个css文件“hello-grid.css”：

.hello-grid {
    display: grid !important;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
}

.label-one {
    grid-column: 1;
}

.label-two {
    grid-column: 2;
}

如何将 ".hello-grid" css 类与 HelloGrid Composite 相关联。
这是在 Vaadin 12 中使用 css 网格的正确/首选方式吗

【问题讨论】：

同时我自己找到了一个可能的解决方案：将getElement().getClassList().add("hello-grid");添加到Composite的构造函数中。但我最初希望能够通过注释来设置元素类名。我将使用此解决方案编辑我的问题。

标签： css vaadin10

【解决方案1】：

这有点太晚了，但也许可以回答其他人的问题。

这取决于您将css 样式放置在何处。我建议放在webapp\frontend\styles 下，然后您就可以使用@StyleSheet("frontend://styles/hello-grid.css") 访问它们。正如官方文档中所指出的，这里是Including Style Sheets

相对于 Servlet URL

在此设置中使用您的示例：

以及类似的样式（基本上只是在样式表中添加颜色以进行验证，它可以工作）

这是输出：

我在 Vaadin 页面上没有找到任何确切的指南，关于如何使用网格样式，但本教程看起来很有前途A Complete Guide to Grid。否则，Vaadin 应该没有什么特别之处。

另外，目录里好像有个插件，可能对Css Grid Layout有帮助（不过我自己没试过）

【讨论】：