Variable Grid Layouts

.variable-grid

.variable-grid는 .auto-grid와 달리 grid-item의 크기에 따라 column이 결정됩니다. ID 요소에 다음과 같이 입력하여 grid-item의 사이즈를 제어할 수 있습니다. .variable-grid 클래스는 ID요소의 min value를 존중합니다.

%root% {
 --min: 280px;
}

var(–variabel-grid)는 특정 custom class의 display속성을 grid로 설정한 상태에서 Grid template columns 란에 사용할 수 있습니다. @variable-grid-columns을 입력한 후 엔터를 치면 자동으로 코드가 생성이 되는데, 이 후 Style > CSS 에서 위와 동일한 코드를 입력하면 동일한 효과를 볼 수 있습니다.

또는, 특정 custom class의 CSS에 @variable-grid를 입력한 후 엔터를 치면, full-code가 자동으로 생성이 되며 이 code를 수정하여 사용할 수도 있습니다.