[CSS] grid-template-columns

grid-template-columns

grid-template-columns 속성은 가로 컬럼의 크기와 위치를 설정합니다.

---

grid-template-columns

grid-template-columns 속성은 가로 컬럼의 크기와 위치를 설정합니다.

특징	설명
기본 값	grid-template-columns : 0
적용	Grid
버전	CSS3
사용성

정의(Definition)

• grid-template-columns 속성은 가로 컬럼의 크기와 위치를 설정합니다.

그리드와 관련된 속성(Grid Related Properties)

• grid 속성은 그리드 레이아웃 속성을 설정합니다.
• grid-area 속성은
• grid-auto-columns 속성은
• grid-auto-flow 속성은
• grid-auto-rows 속성은
• grid-column 속성은
• grid-column-end 속성은
• grid-column-gap 속성은
• grid-column-start 속성은
• grid-gap 속성은 컬럼의 간격을 설정합니다.
• grid-row 속성은
• grid-row-end 속성은
• grid-row-gap 속성은
• grid-row-start 속성은
• grid-template 속성은 컬럼의 속성을 설정합니다.
• grid-template-areas 속성은 컬럼의 영역을 설정합니다.
• grid-template-columns 속성은 가로 컬럼의 크기와 위치를 설정합니다.
• grid-template-rows 속성은 세로 컬럼의 크기와 위치를 설정합니다.

문법(Syntax)

grid-template-columns: length;

예제1(Sample)

가로 컬럼의 크기와 위치를 설정하는 예제입니다.

grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 2fr 3fr; grid-template-columns: 100px 100px 100px; grid-template-columns: 100px 2fr; grid-template-columns: 200px 100px auto; grid-template-columns: repeat(3, 1fr);

아이템

호환성(Compatibility)

						6	7	8	9	10	11
grid-template-columns	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능

참고 사이트(Reference)

• MDN
• w3

---