링크세상 링크모음
링크세상 링크모음 링크 애니 웹툰 링크 드라마 영화 링크 세상의모든링크

Salesforce SLDS 그리드 예 – DevFacts | 기술 블로그 | 개발자 커뮤니티

Salesforce Lightning Design System(SLDS)에는 웹 페이지 및 응용 프로그램에 대한 반응형 레이아웃을 만드는 데 사용할 수 있는 유연한 그리드 시스템이 포함되어 있습니다. 다음은 그리드 시스템을 사용하여 웹페이지의 3열 레이아웃을 만드는 방법의 예입니다.

이 예에서는 slds-grid 클래스는 열에 대한 컨테이너를 만드는 데 사용되며 slds-wrap 클래스는 화면 크기가 특정 중단점보다 낮을 때 열이 다음 줄로 줄바꿈되도록 하는 데 사용됩니다. 그만큼 slds-col 클래스는 각 개별 열에 사용되며 slds-size_1-of-3 클래스는 열 너비를 전체 그리드의 1/3로 정의하는 데 사용됩니다.

열 수와 너비를 조정하여 다양한 레이아웃을 만들 수 있습니다. 예를 들어 다음을 사용하여 2열 레이아웃을 만들 수 있습니다. slds-size_1-of-2 각 열에 대해 또는 다음을 사용하여 4열 레이아웃을 사용합니다. slds-size_1-of-4 각 열마다.

또한 다음을 사용할 수 있습니다. slds-medium-size_1-of-2 또는 slds-large-size_1-of-2 다양한 중단점에서 열의 레이아웃을 변경하는 클래스입니다.

이 예에서 첫 번째 열 너비는 기본적으로 전체 그리드의 1/3이고 화면 너비가 중간 중단점과 큰 중단점 사이에 있으면 전체 그리드의 1/2이 되며 전체 그리드의 1/1이 됩니다. 화면 너비가 큰 중단점보다 클 때 그리드에 표시됩니다.

다양한 그리드 클래스 조합을 실험하여 웹페이지나 애플리케이션에 원하는 레이아웃을 만들 수 있습니다.