Как использовать сетку css в Vaadin Flow вместо GridLayout Framework 8?

Я пытаюсь перенести существующее приложение Vaadin 8 на Vaadin 12, и мне нужно знать, как воссоздать функциональность GridLayout Vaadin 8 в Vaadin 12.

Согласно документам Vaadin, GridLayout можно заменить в Vaadin 12 автор: "Используйте Div вместе с новой функцией CSS Grid, которая поддерживается в большинстве браузеров"

К сожалению, не совсем понятно, как именно это можно сделать.

Предположим, что у меня есть составной объект 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;
}

• Как связать класс css ".hello-grid" с составным элементом HelloGrid.
• Является ли это правильным/предпочтительным способом использования сетки CSS в Vaadin 12 вообще?