css grid 조금 더 알아보기 3

▼▽ Grid가 처음이신 분들은 이전 포스팅을 한번 보시고 오시길 추천드립니다. :) ▼▽

[IT기록 - 개발자/CSS] - css grid 세상에서 가장 쉽게 이해하기

[IT기록 - 개발자/CSS] - css grid 조금 더 알아보기 1

[IT기록 - 개발자/CSS] - css grid 조금 더 알아보기 2

css grid 세상에서 가장 쉽게 이해하기

---

css grid 조금 더 알아보기 3탄입니다. 이해가 잘 안 되시거나 설명이 부족하다 싶으시면 댓글 남겨주시기 바랍니다. 

---

1. minmax(min-value, max-value)

grid를 정렬하다보면 뜻하지 않게 행이나 열이 만들어지기도 합니다. 그럴 땐 본래는 설정된 값이 없기에 자기 맘대로 설정해 버립니다. 이것을 방지하기 위해 새롭게 만들어진 행이나 열의 값을 설정해 주거나, 최솟값을 정했지만 추후 상황에 맞에 크기가 변했으면 좋겠다 할 때 사용할 수 있습니다.

이것은 grid-template속성과 함께 사용합니다. 

grid-template-rows: minmax(min-value, max-value);

예를 들어보겠습니다. grid-template-rows: minmax(100px, auto);인 경우,

자동으로 만들어진 행의 높이는 최소 100px이어야 하고, 최대값은 auto로 정해졌습니다. 화면이 늘어나거나 줄어들 때, 행의 값은 100px이하로는 줄어들지 않고, 늘어난다면 화면의 사이즈에 맞게 늘어날 것입니다.

 

2. implicit rows

 앞서 설명드린 [minman]와 비슷한 역할을 하는 것입니다.  화면의 크기에 따라 예상치 못한 row가 생겼을 경우에 기존에 적용했던 row의 높이는 새로운 row에 적용되지 않습니다. 그것을 자동적으로 적당한 높이를 지정해 주기 위한 장치라고 이해하시면 됩니다. 

사용방법은 grid-auto-rows: 100px; 이런 형식으로 코드를 작성하면 됩니다.

grid-auto-rows: 00px;

3. 이미지 grid

 어쩌면 grid가 가장 매력적이게 느껴질때는 이미지를 배열할 때인 것 같습니다. pinterest나 여러분들이 흔히 사용하시는 instagram과 같이 이미지들을 배열한 경우를 생각해 보시면 되겠습니다. 이번에는 이러한 이미지를 grid로 정렬하는 방법을 알아보겠습니다. 일반 grid와 크게 다를 것은 없습니다.

 이미지 grid를 사용하는 방법은 다음과 같습니다. <div>로 작성했던 것 안에 content대신 image src 혹은 url을 작성하면 됩니다. 그러면 많은 이미지들을 grid 형식으로 배열할 수 있습니다. 

<div><img src="#"/></div>

 보통 grid를 정렬하다보면 중간중간 빈 공간이 생기기도 합니다. 이미지를 배열할 때, 어떤 것은 세로가 길고, 어떤 것은 가로가 길고, 어떤 것은 가로세로가 더 크기도 합니다. 이렇게 차지하는 영역들이 제각각인 경우, 우리는 모든 item들을 매번 빈 공간이 남지 않게 설정할 수는 없습니다. 때론 삭제되거나 새롭게 생성되기도 하기 때문입니다. 이런 경우 어떻게 해결해야 할까요?

 이러한 경우에는 grid-auto-flow를 사용하면 됩니다. grid-auto-flow의 속성값은 다음과 같습니다.

grid-auto-flow : row | column | dense | row dense | column dense;

 ●  row : default값, 각 행을 채웁니다. 

 ●  column : 각 열을 채웁니다.

 ●  dense : 행, 열 관계 없이 grid안에 비어있는 부분들을 차례대로 채웁니다.

 ●  row dense : 각 행을 채우되, grid에 비어있는 부분들을 차례대로 채웁니다. 

 ●  column dense : 각 열을 채우되, grid에 비어있는 모든 부분들을 차례대로 채웁니다. 

 

여기서 '차례대로'라는 것은 기본적으로 좌측 상단에서 우측 하단까지 지그재그로 채워지는 것을 생각하시면 됩니다.