CSS grid

• fr

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: 1fr 1fr 2fr;

}

fr은 fraction의 약자로, %로 설정하는 것보다 responsive하며 숫자로 비율을 조절할 수 있다. 아래의 예시와 같이 된다.

• repeat

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: repeat(4, 1fr) // 1fr을 4번 반복과 같다

grid-template-rows: 1fr;

}

• auto

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: auto 1fr 2fr;

grid-template-rows: 1fr;

}

auto를 쓰면 알아서 크기를 조정해준다. 아래와 같이 여우를 2개로 늘렸을 경우 자동으로 사이즈를 조절해준다.

• justify-items / align-items

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: auto 1fr 2fr;

grid-template-rows: 1fr;

justify-items: start;

}

개발자도구에서 대상을 클릭해보면 grid를 볼 수 있다.

justify-items: start; 로 지정하면 column 템플릿의 크기(auto 1fr 2fr)안에서 앞쪽에 위치하게 된다.(end는 박스 끝)

grid-template-rows: 300px;

align-items: start; 의 경우 아래와 같이 된다. 300px의 템플릿 박스 안에서 위쪽에 위치한다.

• auto-fill / minmax()

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); // 최소크기는 200px이되 창이 이보다 작아지면 1fr을 적용.

grid-template-rows: 1fr;

}

fr을 썼을 경우, %보다 responsive하지만, 크기를 줄일 경우 아래와 같이 fully-responsive하지 않다.

이를 해결하기 위해 auto-fill과 minmax(min,max)를 사용한다.

이 경우 자동으로 창 크기에 따라서 아이템들이 정렬하고 크기를 min~max사이에서 자동 조절한다.

• grid-column-start / grid-column-end / span

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); // 최소크기는 200px이되 창이 이보다 작아지면 1fr을 적용.

grid-template-rows: 1fr;

}

.green {

grid-column-start: 1; // 줄여서 grid-column: 1/3; 라고 해도 같다.

grid-column-end: 3;

}

.green {

grid-column: span 2; // 2개의 grid를 차지하게 해준다.

}

green class에(배경이 녹색인 이모지) 위와 같이 설정하면 아래와 같이 된다.

개발자도구 grid로 보면 여우이모지가 첫 번째 그리드에서 시작해서, 세 번째 그리드 전에 끝나고 있다. (2 grid 차지)

* 주의해야할 점

만약 grid-row: 1/3; 으로 지정한다면 아래와 같이 된다. green 클래스인 유니콘이 1부터 시작하기 위해 위치가 옮겨진다.

• justify-self / align-self

.container {

display: grid;

grid-gap: 20px;

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); // 최소크기는 200px이되 창이 이보다 작아지면 1fr을 적용.

grid-template-rows: 1fr;

}

.green {

grid-column-start: span 2;

grid-row: 1/3;

justify-self: start; //특정 클래스 아이템일 경우 items가 아니라 self라 쓴다.

}