logo image
메인
기술
HOME
기술

css grid repeat 사용법. (동적 컬럼)

new
목록
#grid #auto-fit #auto-fill
grid-template-columns: repeat(3, 260px); 
=> 컬럼 너비 260px 를 기준으로 3개의 컬럼

grid-template-columns: repeat(3, 1fr);
=> 부모너비 기준으로 동일한 비중으로 3개의 컬럼 (컬럼 하나에 33.33% 정도가 된다.)

grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); 
=> 최대한 같은 컬럼 너비를 가지려고 한다. 최소 컬럼너비는 260px이다.
=> 최소 260px 기준에서 커질 수 있고, 최소 기준으로 계산해서 여백이 260px 이상이라면 새로운 컬럼이 추가된다.
=> auto-fill 효과로 여백이 남아도 빈 컬럼으로 확장하지 않는다. 컬럼수를 유지한다 (1row만 있을 경우)(고정 컬럼 수/너비)


grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
=> 최대한 같은 컬럼 너비를 가지려고 한다. 최소 컬럼너비는 260px이다.
=> 최소 260px 기준에서 커질 수 있고, 최소 기준으로 계산해서 여백이 260px 이상이라면 새로운 컬럼이 추가된다.
=> auto-fit 효과로 여백이 남으면 빈 컬럼 없이 존재하는 컬럼이 넓어지면서 채운다. (1row만 있을 경우)(동적 컬럼 수/너비)

목록
댓글
  • / /
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
일
월
화
수
목
금
토
6.1
css grid repeat 사용법. (동적 컬럼)
6.2
6.3
6.4
6.5
6.6
6.7
6.8
6.9
6.10
6.11
6.12
6.13
6.14
6.15
6.16
6.17
6.18
6.19
6.20
6.21
6.22
6.23
6.24
6.25
6.26
6.27
6.28
6.29
6.30
7.1
7.2
7.3
7.4
7.5
tag