새소식

인기 검색어

HTML & SCSS (CSS3)

grid(3)

  • -

 

grid의 정렬 속성에 대하여 알아보았다.

 


auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채울 수 있다.

 따라서 반응형을 보다 쉽게 만들 수 있고 repeat() 함수와 minmax() 함수랑 궁합이 잘 맞는다.

 

.container { grid-template-columns: repeat(auto-fill, minmax(20%, auto)); }

auto-fil 의 크기를 20%로 설정했으므로, 1개의 row에는 5개의 셀이 들어갑니다.

auto-fill과 auto-fit 의 차이는

auto-fil은 크기보다 셀의 개수가 부족하면, 공간이 남게 되고

반대로 auto-fit을 사용하면, 남는 공간을 채운다.


gap은 행과 행, 열과 열 사이에 간격을 지정해줄 수 있다. 더 정확히는, grid Line의 두께를 지정해주는 것이다.

.container { display: grid; grid-template-columns: repeat(3, 130px); grid-template-rows: repeat(2, 130px); column-gap: 30px; row-gap: 30px; }

 


grid의 정렬 또한 flex의 정렬과 같은 테그를 사용한다.

세로축으로 정렬하는 align-content와 가로축으로 정렬하는 justify-content이 있고

사용할 수 있는 값도 start, center, end, space-around, space-between, space-evenly, stretch로 똑같다.

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.