grid-template-columns CSS

grid-template-columns: repeat(6, 1fr);는 CSS Grid를 사용하여 6개의 열을 동일한 너비로 설정하는 속성입니다. 하지만 각 열의 너비를 텍스트의 길이에 맞추려면 repeat와 1fr 대신 auto를 사용할 수 있습니다.

각 열의 너비를 텍스트 길이에 맞추는 방법은 아래와 같습니다.

.container {
  display: grid;
  grid-template-columns: repeat(6, auto);
  gap: 10px; /* 열 사이에 간격을 두고 싶을 때 사용 */
}

위의 코드를 사용하면 각 열의 너비는 해당 열에 있는 텍스트 또는 콘텐츠의 크기에 따라 자동으로 조절됩니다. 이렇게 하면 각 열의 너비가 동일하지 않고, 각 열에 포함된 내용에 따라 다르게 설정됩니다.

또한, 추가적인 유연성을 위해 최소 또는 최대 너비를 설정하고 싶다면 minmax() 함수도 사용할 수 있습니다. 예를 들어, 각 열의 최소 너비를 100px로 설정하고 나머지를 자동 조절하고 싶다면 다음과 같이 할 수 있습니다.

.container {
  display: grid;
  grid-template-columns: repeat(6, minmax(100px, auto));
  gap: 10px;
}

이렇게 하면 각 열의 최소 너비는 100px로 고정되지만, 텍스트 길이에 따라 더 넓어질 수 있습니다.