如何在Vaadin流中使用css网格来替代framework8'；什么是网格布局？

我正在尝试将现有的vaadin8应用程序迁移到vaadin12，需要知道如何在vaadin12中重新创建vaadin8的GridLayout功能

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

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

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

• 如何将“.hello grid”css类与HelloGrid组合关联
• 这是在Vaadin 12中使用css网格的正确/首选方法吗

---

有点太晚了，但可能会回答其他人的问题
这取决于您将

css

样式放置在什么位置。我建议将其放在

webapp\frontend\styles

下，然后您可以使用

@StyleSheet（“frontend://styles/hello-grid.css）

。正如官方文件中所指出的，这里是
相对于Servlet URL
使用此设置的示例：
和类似的样式（基本上只是向样式表添加颜色以验证是否有效）
这就是输出：
我还没有在Vaadin页面上找到任何关于如何使用网格样式的确切指南，但本教程看起来很有希望。否则，瓦丁就没有什么特别的了

---

此外，目录中似乎有一个插件，它可能会有所帮助（通过，我自己还没有尝试过）
同时我自己找到了一个可能的解决方案：add

getElement（）.getClassList（）.add（“hello grid”）到组合的构造函数。但我最初希望能够通过注释来设置元素的类名。我将使用此解决方案编辑我的问题。
@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);
   }
}

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

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

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