grid-template-columns 속성
grid-template-columns 속성은
그리드 또는 격자에서 요소가 차지할
열의 수와 너비를 지정합니다.
이 속성은 부모 요소에 지정되며
자식 요소들의 열 너비를 정의합니다.
속성 값에는 크기 단위로
열 너비를 지정합니다.
속성 값에 픽셀 단위를 지정하면
열 크기는 정확히 그에 맞게 됩니다.
auto 키워드를 지정하면 열은
사용 가능한 모든 공간을 채웁니다.
fr (비율) 단위를 사용하면
모든 공간이 동일한 부분으로
나누어집니다. fr의 장점은
다른 컨테이너나 화면 해상도에 대한 적응성에 있으며,
fr는 픽셀 단위의 정확한 크기에 구애받지 않고
지정된 수의 비율로 공간을 분할합니다.
구문
selector {
grid-template-columns: column-width;
}
예제
그리드 내 요소들의 열 너비를 지정해 봅시다:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
예제
첫 번째와 세 번째 열에는 픽셀 단위로 고정 너비를 지정하고, 두 번째 열은 사용 가능한 공간을 자동으로 채우도록 해봅시다:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
예제
이제 grid-template-columns 속성을 사용하여
첫 번째와 두 번째 열이 컨테이너의 한 부분을 차지하고,
세 번째 열이 세 부분을 차지하도록 만들어 봅시다:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
예제
fr 단위로 지정된 값은 소수 형태를 취할 수 있습니다.
이전 예제를 수정하여 두 번째와 세 번째 열의 너비를
소수로 지정해 봅시다:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
예제
grid-template-columns 속성에
repeat() 함수를 지정하여
세 열 모두 동일한 너비를 가져야 한다고
컨테이너에 알려줍시다:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
예제
이제 이전 예제를 수정하여 동일한 세 개의 열에 컨테이너의 두 비율을 차지하는 네 번째 열을 추가해 봅시다:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
예제
처음 두 열에는 컨테이너의 한 비율 너비를, 마지막 두 열에는 두 비율 너비를 지정해 봅시다:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
예제
이제 repeat() 함수와 자유 fr 단위로 지정된 값을
조합하여 열 너비를 설정해 봅시다:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
예제
repeat() 함수 내에
auto-fill 값을 지정할 수도 있으며,
이 값은 컨테이너를 우리가 원하는 너비의 동일한 열로 채웁니다:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
예제
auto-fill와 함께
minmax 함수를 지정하는 것이 매우 편리합니다.
이 함수는 열 너비의 범위를 최소값에서 최대값까지 지정합니다.
컨테이너 너비가 모든 열을 수용할 수 없으면
일부 열이 새 줄로 이동하며, 줄 내의 열은
균등하게 분배됩니다. 이전 예제를 수정하여
minmax 함수를 지정해 봅시다.
열 배치의 다양한 변형을 보려면
브라우저 페이지 너비를 변경하세요:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
예제
이제 auto-fit 속성을 지정해 봅시다.
이 속성은 auto-fill와 달리
사용 가능한 컨테이너 너비에 맞게 열 수를 조정하여
열을 확장하거나 축소합니다:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
예제
fr와 함께 % 값을 사용할 수도 있으며,
이 값은 열이 컨테이너의 어느 부분을 차지할지 정의합니다.
이 경우 먼저 % 단위의 열 크기가 계산된 후
남은 여유 공간이 비율로 분할됩니다:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
예제
grid-template-columns 속성과
grid-template-rows 속성을 함께 사용해 봅시다:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
예제
grid-template-columns 속성과
grid-template-rows 속성을 사용하여
3개의 행에 위치한 9개의 셀로 이루어진 테이블을 만들어 봅시다.
두 번째와 세 번째 행은 동일한 너비를 가지고,
각 열은 다른 너비를 가지게 됩니다:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
예제
이제 이전 예제의 테이블에서 상단 행의 너비를 두 비율로, 첫 번째 열의 너비를 0.5 비율로 만들어 봅시다:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
같이 보기
-
그리드에서 행의 수와 너비를 지정하는 속성
grid-template-rows -
암시적 그리드에서 열의 수와 너비를 지정하는 속성
grid-auto-columns
