그리드 레이아웃 부모 속성 part1 - by. UXKM

display

그리드 컨테이너를 지정할 수 있습니다.
지정된 컨테이너의 자식 요소들은 자동으로 그리드 아이템이 되며, 그리드를 사용하기 위해 컨테이너에 필수로 작성합니다.

1. grid : block 특성의 그리드 컨테이너를 지정합니다.
2. inline-grid : inline 특성의 그리드 컨테이너를 지정합니다.

grid-template-columns / grid-template-rows

공백으로 구분된 값 목록으로 그리드의 명시적(explicit grids) 열(track)과 행(track)의 크기를 지정할 수 있습니다.
값은 트랙 크기를 나타내며, 그 사이의 공간은 그리드 선을 나타냅니다. 라인(line)의 이름도 함께 지정할 수 있습니다.

fr(fraction, 공간 비율) 단위와 repeat() 함수를 사용할 수 있습니다.

1. <track-size> : 그리드에서 사용 가능한 공간의 길이 (px, rem, em, %, fr 등)
2. <line-name> : 사용자가 설정한 임의의 선 이름

grid-template-areas

영역(area) 이름을 참조하여 템플릿을 생성할 수 있습니다.

1. <grid-area-name> : 사용자가 grid-area 속성 값으로 설정한 임의의 그리드 영역 이름
2. 마침표(.) : 비어있는 그리드 셀
3. none : 그리드 영역으로 지정되지 않은 셀

다음은 3행 4열 그리드 템플릿 영역 설정 예제입니다.

명시적으로 그리드(explicit grids)를 지정할 때 그리드 컨테이너에 3개의 속성을 사용할 수 있습니다.

1. grid-template-rows
2. grid-template-columns
3. grid-template-areas

grid-template

grid-template-xxx의 단축 속성입니다.
grid-template 속성은 grid-template-{rows, columns, areas} 속성을 축약형으로 사용할 수 있도록 합니다.

1. grid-none : 3가지 설정을 모두 초기 값으로 적용
2. grid-template-rows / grid-template-columns : 행/열 그리드 템플릿 설정
3. 라인이름(옵션) 영역이름(필수) 트랙 크기(옵션) 라인이름(옵션)

그리드 행/열 템플릿을 축약형 속성으로 설정한 예

축약형으로 적용된 속성을 개별 속성으로 풀어본 예

행/열 그리드 템플릿에 영역이름 템플릿을 함께 설정 한 예

속기형으로 적용된 속성을 개별 속성으로 풀어본 예

grid-template-areas 속성은 암시적인 그리드 속성을 초기화하지 않습니다.

1. grid-auto-rows
2. grid-auto-columns
3. grid-auto-flow

grid-auto-flow

자동 배치 알고리즘 방식을 지정할 수 있습니다.
기본적으로 항목을 배치할 때 그리드에 간격이 생성되면 자동 배치된 그리드 항목이 간격을 채우지 않고 마지막 항목 뒤에 추가됩니다.
dense 키워드를 사용하면 이를 변경할 수 있으며, 암시적 그리드 알고리즘이 자동 배치된 항목과의 간격을 채우고 필요할 때 항목의 순서를 변경하도록 합니다.
항목 순서가 중요하지 않은 이미지 갤러리를 만들 때 유용합니다.

1. row : 기본값으로 각 행을 차례로 채우고 필요에 따라 새 행을 추가하는 자동 배치 알고리즘입니다.
2. column : 각 열을 차례로 채우고 필요에 따라 새 열을 추가하는 자동 배치 알고리즘입니다.
3. dense : 배치 중 나중에 크기가 작은 아이템이 존재할 경우, 그리드 영역 앞부분의 남은 공간에 자동 배치하는 알고리즘입니다.
4. row dense : 각 행 축을 따라 차례로 배치하며 빈 영역을 메웁니다.
5. column dense : 각 열 축을 따라 차례로 배치하며 빈 영역을 메웁니다.