| 참고 영상
grid
먼저 행(row), 열(column) 알아보기
사실 나는 이게 몇년째 헷갈려서 할 때마다 찾아보고 있다.
우선 사용할 기본 문서를 만들어줬다.
container에 적용하는 속성
우선 container에 display: grid 를 적용하면 달라지는 건 없다
grid-template-columns
columns로 정렬했을 때 템플릿의 비율
.container {
display: grid;
grid-template-columns: 40% 60%;
background-color:whitesmoke
}
// 위 코드와 비슷하지만 더 많이 쓰이는 문법
.container {
display: grid;
grid-template-columns: 4fr 6fr;
background-color: whitesmoke;
}
왜 fr 단위를 많이 사용할까? → gap을 넣어보면 알 수 있다.
- fr : fractional unit의 준말. 사용 가능한 공간에 대한 비율을 뜻한다.
fr일 때
.container {
display: grid;
grid-template-columns: 4fr 6fr;
grid-gap: 1rem; // <- 요거 추가
background-color: whitesmoke;
} 
%일 때
.container {
display: grid;
grid-template-columns: 40% 60%; // <- %로 수정
grid-gap: 1rem; // <- 요거는 동일
background-color: whitesmoke;
} 
똑같아 보일 수 있으나 가로 스크롤이 생긴것을 알 수 있다 → gap이 width에 추가적으로 들어가서 그렇다. ⇒ 너비 제어가 어려워진다
repeat()
반복할 횟수와 사이즈를 지정할 수 있다.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); // (반복할 횟수, 사이즈)
// 위 코드와 같은 표현
// grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
background-color:whitesmoke
}
만약에 어떤 부분은 특정 사이즈로 고정하고 나머지의 크기는 유동적이게 하고 싶다면,
.container {
display: grid;
grid-template-columns: 200px 1fr; // 고정하고 싶은 사이즈를 직접 넣으면 된다
grid-gap: 1rem;
background-color:whitesmoke
}
다음 속성을 적용해보기 위해 요소의 높이를 다르게 주고자 p태그에 내용을 좀 입력해줬다.
display: grid가 적용되어 있기 때문에 같은 행에 있는 요소끼리는 높이가 자동으로 맞춰진 모습이다.
하지만! 컨텐츠 내용에 상관없이 높이를 지정해주고 싶어!
grid-auto-rows
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
grid-auto-rows: 300px; // <- 이렇게 추가
background-color:whitesmoke
}
그런데 지정한 높이가 컨텐츠 내용보다 많아서 넘치게 된다면?
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
grid-auto-rows: 250px;
background-color:whitesmoke
}
grid-auto-rows: minmax()
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
grid-auto-rows: minmax(250px, auto); // minmax 추가
background-color:whitesmoke
}
(확연한 차이를 알아보기 위해 컨텐츠 내용을 늘렸다)
- minimum으로 250px이 적용되지만 그보다 높이가 높은 요소가 있다면 해당 요소에 맞추어 높이가 auto로 적용됨
justify-items
정렬하기(flex에서의 justify와 동일하다)
justify-items: start
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
grid-auto-rows: minmax(250px, auto);
justify-items: start; // <- 요기 추가
background-color:whitesmoke
}
justify-items: center
justify-items: end
align-items
flex의 align-items와 동일하게 justify축의 수직축을 기준으로 정렬된다
align-items: start
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
grid-auto-rows: minmax(250px, auto);
align-items: start; // <- 요기 추가
background-color:whitesmoke
}
align-items: center
align-items: end
justify-self
요소 각각의 정렬을 적용할 수 있다.(flex의 align-self처럼)
.item:nth-child(5) {
justify-self: start;
}
// container에 적용한 align-items는 지우고 조정하고 싶은 요소에만 값을 지정해주었다
align-self
justify-self처럼 물론 align-self도 가능하다.
.item:nth-child(4) {
justify-self: start;
align-self: end;
}
// 5번 높이때문에 애매하게 보여서 확연한 차이를 위해 4번으로 적용해줬다
응용해보기
각 요소들을 내가 원하는 사이즈대로 배치시켜보자.
예를 들어 1번은 가로로 한 행을 꽉 채우고 싶다, 2번은 그 남은 영역의 세로로 꽉 채우고 싶다, 3번은 가로 2개 사이즈 만큼을 가지고 싶다.. 등등
이를 위해서는 우선 grid의 column, row가 어떻게 적용되고 있는지를 알아야 한다.
우선 1번이 column으로 꽉 차게 해보겠다
.item:first-child {
grid-column: 1/4; // 분수가 아니라 1부터 4까지라는 의미
}
그럼 이번엔 4번이 row로 꽉 차게 해보자
위에 만든 기준 그림을 참고하면 2~4가 된다
.item:nth-child(4) {
grid-row: 2/4;
}
- 오잉? row가 2부터 4까지는 잘 적용이 됐는데.. 순서가 멋대로 바뀌었다 → column을 설정해주면 된다
.item:nth-child(4) {
grid-column: 3; // <- 요기 추가
grid-row: 2/4;
}
이번에는 9번이 4번을 쪼그라트리지 않으면서 침범하게 해보겠다
.item:nth-child(9) {
grid-column: 3;
grid-row: 3/5;
}
