css minmax 사용법

css minmax 사용법 : grid로 레이아웃을 만들 때 많이 사용.

문법 : min 보다 크거나 같고, max 보다 같거나 작은 단위

minmax(min, max);

예시 :

.grid-container {
  display: grid;
  grid-template-rows: repeat(2, minmax(20px, auto));
  grid-template-columns: minmax(30px, auto) repeat(3, 1fr);
}

참고 :

minmax() - CSS: Cascading Style Sheets | MDN

The minmax() CSS function defines a size range greater than or equal to min and less than or equal to max. It is used with CSS Grids.

developer.mozilla.org

minmax() 함수 - CSS Grid Layout Guidebook

grid-template-columns: minmax(30px, auto) repeat(3, 1fr);

yamoo9.gitbook.io

min-content, max-content, minmax 활용과 css grid의 auto-fit, auto-fill

min-content와 max-content 활용이름에서 알 수 있듯이 min-content는 최소한의 컨텐츠 크기를, max-content는 최대한의 컨텐츠 크기를 가지게 해주는 값입니다. 위의 코드를 봐주세요. 해당 코드에 우리는 가

justmakeyourself.tistory.com

728x90