CSS fit-content() 함수

정의와 사용법

CSS의 fit-content() 함수는 내용에 따라 요소의 크기를 조정할 수 있도록 합니다. 이 방식은 요소가 사용 가능한 공간을 사용하지만 최대 내용 크기를 초과하지 않는다는 것과 유사합니다.

예제

사용하여 fit-content() 그리드 내 열의 크기를 조정합니다：

#container {
  display: grid;
  grid-template-columns: fit-content(250px) fit-content(250px) auto;
  grid-gap: 7px;
  box-sizing: border-box;
  height: 150px;
  width: 100%;
  background-color: green;
  padding: 7px;
}

직접 시험해 보세요

CSS 문법

fit-content(length|percentage)

기술 세부 사항

브라우저 지원

표中的 숫자는 이 함수를 최초로 완전히 지원하는 브라우저 버전을 나타냅니다。

관련 페이지

참조:CSS 그리드 자동 컬럼 속성

참조:CSS 그리드 자동 행 속성

참조:CSS grid-template-columns 속성

참조:CSS grid-template-rows 속성