css ::) 그리드 레이아웃

display : { 속성값 }
grid : 컨테이너 안의 항목을 블록 레벨 요소로 배치
inline-grid : 컨테이너 안의 항목을 인라인 레벨 요소로 배치

 

grid-template-columns : 속성 - 각 칼럼의 너비를 지정한다
grid-template-rows : 속성 - 컨테이너 안의 줄의 간격, 높이 지정

 

px -> 크기 고정
fr -> 상대적 크기 지정

 

repeat()함수 값이 반복될 경우 줄여서 표현

auto-fill: 너비만큼 채우기
auto-fit: 공간 없이 꽉 채우기

 

minmax(최소, 최대) - 줄 높이를 고정하지 않고 유연하게 지정한다

                                - 줄 높이를 고정할 경우 지정한 높이보다 내용이 많을 경우 보이지 않음

 

px: 크기 고정되어 넘어가면 보이지 않음
minmax(100px auto):100px 표시되고 넘어갈 경우 자동으로 늘어남

 

그리드 항목의 간격을 조절한다
grid-column-gap: 칼럼과 칼럼 사이의 간격지정
grid-row-gap: 줄과 줄 사이의 간격지정
grid-gap: 칼럼과 줄 사이의 간격을 한꺼번에 지정

 

*그리드 라인을 이용해 그리드 항목을 배치
grid-column-start 칼럼 시작의 라인 번호 지정
grid-column-end 칼럼 마지막의 라인 번호 지정
grid-column 칼럼 시작번호와 끝번호 사이에 "/"넣어 사용
grid-row-start 줄 시작 라인번호 지정
grid-row-end 줄 마지막 라인번호 지정
grid-row 줄 시작 번호와 줄 끝 번호 사이에 "/" 사용

 

 

https://blog.naver.com/hkhaoo/222430249823

css 그리드 레이아웃:display,grid-template(-row,-columns),fr,repeat,minmax,auto(-fill,-fit),grid-gap...)