모든 그리드 항목에 대한 전체적인 그리드 레이아웃 구조를 쉽게 시각화시키는 방법을 제공한다.
grid-area
속성을 사용하여 그리드 레이아웃 항목의 식별값을 지정한 다음 grid-template-areas
속성의 값으로 참조할 수 있다. 각 행(row) 영역은 인용 부호(문자열)로 감싸 정의하고 그 문자열 내에서 공백으로 열(column)을 구분하여 작성한다. 이름 없는 레이아웃 항목을 나타내려면 마침표를 사용한다. 이 경우 자동 배치 알고리즘에 따라 배치된다.
모든 그리드 항목이 어떠한 식이든 grid-template-areas
속성에서 정의되어야 하며 각 행(row)당 열(colum)의 수가 동일해야 한다. 만약 코드상에 정의한 열(colum)의 총 개수보다 실제로 그리드 항목의 수가 적을 때는 그 차이만큼 마침표(.
)를 넣어 빈 영역을 만든다.
grid-area
)이 미디어쿼리 밖에서 정의되어야 한다.grid-template-areas
속성에 사용되는 타입이다.
레이아웃 항목에게 grid-area
속성으로 지정된 이름을 이용하거나 마침표를 이용해서 문자열 형식으로 레이아웃 항목들을 배치하는 값을 나타낸다.
none | <string>+
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
명시적 그리드 트랙이 이 속성에 의해 생성되지 않음을 나타낸다. 그러나 명시적 그리드 트랙은 여전히 grid-template-columns
또는 grid-template-rows
에 의해 생성될 수 있다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
명시적 그리드 트랙이 이 속성에 의해 생성되지 않음을 나타낸다. 그러나 명시적 그리드 트랙은 여전히 grid-template-columns
또는 grid-template-rows
에 의해 생성될 수 있다.
grid-template-areas: <string>+;
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Grid Layout Module Level 2 | 후보 추천 초안 | 사용자 인터페이스 설계에 최적화된 2차원 그리드 기반 레이아웃 시스템을 정의한다. Last review date: 2022-6-23 |