Bricks 1.6.1 버전부터 사용 가능한 CSS 그리드를 사용하면 2차원 레이아웃(열 및 행)을 만들 수 있습니다. 반면 Bricks에서 기본 레이아웃 모델로 사용하는 CSS flexbox는 1차원 레이아웃(열 또는 행)을 위해 설계되었습니다.
그리드 레이아웃 만들기
레이아웃 요소(섹션, 컨테이너, 블록, div)의 Display 값을 `<display>`로 설정하면 해당 요소를 CSS 그리드 레이아웃으로 변환할 수 있습니다 grid. 이 요소가 바로 그리드 컨테이너 입니다 .
그리드 컨테이너의 모든 직계 자식 요소는 그리드 항목 이며, 그리드 열 및 그리드 행 에 대한 추가 설정을 통해 그리드 내에 항목을 배치할 수 있습니다.
빌더에서 그리드 컨테이너를 편집할 때 그리드 셀을 나타내는 오버레이가 표시됩니다 . 네모난 요소 아이콘을 클릭하면 이 오버레이를 표시하거나 숨길 수 있습니다.
6개의 그리드 항목(직계 자식)과 20px 간격을 가진 그리드 컨테이너(display: grid)
위 스크린샷에서 볼 수 있듯이, 그리드 항목은 기본적으로 행으로 배치되어 그리드 컨테이너의 전체 너비를 차지합니다. 하지만 이것만으로는 CSS 그리드의 진정한 기능을 활용할 수 없습니다. CSS 그리드의 진정한 힘은 다음과 같은 과정을 거쳐야 발휘됩니다…
비주얼 그리드 빌더
레이아웃 요소의 Display 값을 로 설정하면 gridBricks는 그리드 컨트롤에 Visual Grid Builder 액션을 추가합니다. 이 액션을 열면 모든 열, 행, 간격 값을 수동으로 입력하는 대신 시각적으로 생성하고 조정할 수 grid-template-columns있습니다 grid-template-rows.
비주얼 그리드 빌더는 그리드 패널, 행 및 열 컨트롤, 중단점 컨트롤, 실행 취소/다시 실행 기록, 그리고 그리드 채우기 또는 초기화와 같은 작업을 표시합니다. 열, 행 및 간격 값은 그리드 컨트롤에 저장됩니다. 그리드 항목 배치는 가능한 경우 하위 그리드 컨트롤에 저장됩니다. 쿼리 루프 항목, 활성 클래스 스타일, 중첩 불가능한 요소 또는 구성 요소 루트의 경우, Bricks는 생성된 배치 CSS를 선택한 그리드의 사용자 지정 CSS에 비주얼 그리드 빌더 마커 사이에 기록합니다.
열 및 행 트랙 설정(명시적 그리드)
그리드 컨테이너를 생성했으면 이제 그리드 열 및 행 트랙을 정의할 차례입니다 .
그리드 컨테이너의 그리드 템플릿 열 ( grid-template-columns) 및 그리드 템플릿 행 ( ) 설정을 통해 이를 명시적으로 수행할 수 있습니다 .grid-template-rows
몇 가지 예를 함께 살펴보겠습니다…
***grid-template-columns: 200px 1fr 2fr***
속성 의 각 값은 grid-template-columns열 트랙을 생성합니다.
위 예시는 3열 그리드 레이아웃을 생성합니다.
첫 번째 열은 너비가 200px로 고정되어 있습니다. 두 번째 열은 1fr너비가 3 입니다 2fr.
**fr**이는 사용 가능한 공간의 x 부분을 차지하는 분수 단위라고 불리는 새로운 유연한 단위입니다.
어떻게 fr계산되나요?
그리드 컨테이너의 너비가 1100px(컨테이너의 기본 너비)라고 가정해 보겠습니다.
먼저 모든 비-fr 값과 간격을 빼야 합니다. 따라서 1열의 고정 너비 200px를 빼면 남은 사용 가능한 너비는 900px입니다.
남은 공간을 할당해야 할 분수 단위는 총 3개(2열의 1fr + 3열의 2fr)입니다.
즉, 1프렌치는 300픽셀(900픽셀/3)과 같습니다. 따라서 2열은 300픽셀(1프렌치 x 300픽셀) 너비이고, 3열은 600픽셀(2프렌치 x 300픽셀) 너비입니다.
***grid-template-rows: 100px 300px***
s 속성 의 각 값은 grid-template-row행 트랙을 생성합니다.
위 예시에서는 첫 번째와 두 번째 행의 높이를 명시적으로 정의했습니다. 첫 번째 행은 높이가 100px이고, 두 번째 행은 높이가 300px입니다.
첫 두 행의 높이만 명시적으로 정의했기 때문에 두 번째 행 이후의 모든 행의 높이는 기본적으로 해당 행 내용의 높이에 따라 결정됩니다. 암시적 그리드를 생성함으로써 이 동작을 변경할 수 있습니다.