CSS Grid 아이템의 가로폭(width) 고정하기

Grid에 항목들을 채워넣다보면 기존에 정해놓은 그리드 사이즈를 초과하여 공간을 차지하게 되는 경우가 있다.

그리드 컨테이너안에 들어있는 아이템 내부도 원하는 항목들로 채워넣게 되는데 내부 항목들의 종류나 길이에 따라 이러한 문제가 발생하기도 한다.

이는 그리드의 각 아이템에서 해결하는 방법이 있고 그리드 컨테이너 설정 자체에서 해결하는 방법이 있다.

 

1. 그리드 아이템에서 해결하기

텍스트의 white-space 속성으로 인해 문제가 발생할 수 있다.

원래 텍스트의 길이가 길어지면 정해진 width를 넘어갈때 자동으로 줄바꿈된다.

하지만 텍스트가 길때 자동으로 생략 처리 하고싶거나 여러가지 텍스트 표시방법을 바꿀때 white-space 속성을 사용하게 된다.

 

white-space 속성은 HTML요소의 공백과 줄바꿈을 처리하는 규칙을 지정한다. 이때 줄바꿈을 자동으로 처리하지 않고 일렬로 쭉 나열되게 하는게 nowrap 속성이다.

.content {
	white-space: nowrap;
}

 

 

nowrap이 적용된 텍스트는 일렬로 길게 표시되므로 기존에 지정된 width값을 넘는 길이의 텍스트가 입력되면 그 공간을 초과하게 된다. 이때 그리드 아이템의 width가 강제로 늘어나는 현상이 발생할 수 있다.

 

이는 보통 overflow 속성으로 해결이 가능하다.

 

.content {
    white-space: nowrap;
    overflow: hidden; /* 항목의 width 이상으로 내용물이 표시되는것을 방지 */
    max-width: 100%; /* 항목의 기존 width를 초과는것을 방지 */
    width: 100%;
}

 

overflow 속성을 주면 기존에 정해진 width값을 넘는 내용은 화면에 표시되지 않도록 해준다. 거기에 max-width값을 지정해 상위요소의 width값 이상으로 텍스트항목의 크기가 커지지 않도록 방지한다.

 

다시말해 overflow, max-width 값을 잘 활용하면 문제가 해결될 수 있다.

 

2. 그리드 컨테이너에서 해결하기

overflow나 width값을 이리저리 조절해봐도 원하는대로 동작하지 않을때가 있다. 이럴때는 그리드 자체의 설정 문제일 수 있다.

.gridContainer {
    /* grid-template-columns: 1fr 1fr 1fr 1fr; 그리드를 1:1:1:1로 분할 */
    /* grid-template-columns: repeat(4, 1fr); 위와 동일(1fr을 4번 반복하라는 의미) */
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 이 방식으로 문제 해결 */
}

 

 

fr은 fraction의 약자로 그리드를 일정 비율로 나눌수 있게 해준다. 예를들어 1fr 3fr 1fr 로 작성하면 그리드를 1:3:1 비율로 3분할 하는것이다. 이는 column과 row에 (가로세로) 따로 적용할 수 있다.

 

그런데 fr은 말그대로 비율을 설정하는 것이므로 width값이 고정되어있지 않다. 하위요소로 아주 큰 항목이 온다면 비율을 유지할뿐 width는 기존 설정된 너비보다 더 늘어날 수 있다는 것이다. 이러한 현상을 비율을 유지하려는 grid의 특성상 큰 항목이 들어온 그리드 아이템 외의 다른 아이템에도 영향을 줄 수 있다.

 

이때 minmax를 활용하면 이런현상을 방지할 수 있다. minmax는 그리드 아이템의 최소, 최대값 (여기서는 colunms이므로 가로)을 정해주는 역할을 하는데 min은 0, max는 1fr로 지정하면 기존 width에 맞게 정의된 1fr의 너비를 초과하지 않게 해준다.

 

아래는 적용 결과이다.

 

 

• 1fr 1fr 1fr 1fr (repeat(4, 1fr)) 을 적용한 그리드

설정에 따라 1:1:1:1로 비율에 맞춰 그리드가 적용됨 (gap 등이 적용되어있음)

 

• 긴 텍스트가 들어와 width가 확장됨

처음 항목에만 긴 텍스트가 들어갔지만 1:1:1:1의 비율을 유지하려는 grid의 특성상 다른 항목도 영향을 받음 (브라우저에 따라 해석이 다름)

 

• minmax 적용

minmax를 적용하여 텍스트 길이에 상관없이 크기가 고정됨. 넘치는 컨텐츠는 overflow 등의 속성으로 처리하면 된다.