grid-column, grid-row
grid-column-start, grid-column-end로 따로 지정해줬던 시작과 끝을 한꺼번에 지정할 수 있음
grid-column: 1 / 5;시작과 끝을 바로 명시해버리는 방법도 있지만 얼만큼의 공간을 차지하는지 명시하는 방법도 있음
grid-column: 1 / -1;이때 음수는 맨 끝부터 -1, -2, -3, ... 을 의미함
grid-column: span 2;span은 몇 칸을 차지하는지 명시함
fr
fraction. 사용 가능한 공간을 의미함
.header {
grid-template-columns: repeat(4, 1fr);
}열을 4개로 나누는데 너비는 화면에 맞는 비율로 배분해서 나뉨
fr을 활용해 grid-template 사용하기
.header {
grid-template:
“header header header header” 1fr
“content content content nav” 2fr
“footer footer footer footer” 1fr / 1fr 1fr 1fr 1fr
}맨 끝에 높이를 지정해주고 column의 너비를 마지막에 지정. → (/ 1fr 1fr 1fr 1fr 부분)
justify-items
grid 자체를 움직이는 게 아닌 그 안의 content를 horizontal 방향으로 움직여 배치
align-items
justify-items와 마찬가지로 grid 안의 content를 배치하는데 vertical 방향으로 배치함
place-items
justify-items, align-items를 동시에 명시
...
place-items: stretch center;
...이때 vertical horizontal 순으로 적용됨
justify-content
grid 자체를 움직임. 방향은 horizontal
align-content
grid 자체를 움직임. 방향은 vertical
place-content
grid 자체를 움직이는데 place-items와 비슷한 역할.
...
place-content: stretch center;
...역시 적용 방향은 vertical horizontal 순
auto-columns & rows
grid-auto-rows: 지정한 grid보다 더 많은 content가 있으면 자동으로 row를 만들도록 함
/* div의 개수 대략 50개 정도*/
grid-template-columns: repeat(4, 100px);
grid-auto-rows: 100px; div의 개수에 맞게 rows를 자동으로 생성. 이때 너비는 100px로 지정
grid-auto-flow: grid에서 지정한 것 이외의 div는 사이즈가 없는 여분을 CSS가 넣는데 이때 column의 개수를 늘릴지 row의 개수를 늘릴지 설정하는 부분.
grid-auto-flow: column; /* column을 자동으로 늘림 */