CSS grid를 지정하면 각각의 item에게 배치 위치를 지정해줘야한다.
배치 방법을 크게 두가지로 나누면, 1. 부모요소에서 지정해주는 방법, 2. 자식요소에서 지정하는 방법이다.
부모요소에서의 지정
grid-template-areas 를 사용
자식요소에서의 지정
grid-column, grid-row 사용
두가지 방법 모두 예제를 통해 살펴보자.
두 방법을 파악하기 위해 먼저 예시가 되는 html code부터 살펴보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Grid area designation</title>
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
</body>
</html>부모요소 "parent" 내부에 5개의 자식요소 "child"를 배치했다.
최종 목표는 이 grid의 각 item들을 다음과 같이 배치하는 것이다.
이를 위해서는 우선 3x2 의 grid를 만들어야한다.
다음을 CSS 코드로 작성해보면 다음과 같다. (너비:높이 2:1, body 배경색은 검은색, grid 의 item은 흰색 지정)
body {
width: 100%;
height: 100vh;
gap: 2px;
font-size: 30px;
}
.parent {
width: 90%;
aspect-ratio: 2/1;
display:grid; /* display 를 grid로 지정 */
background-color:black;
border: 5px solid black;
gap:5px;
grid-template-columns: 1fr 1fr 1fr; /* 동일 크기의 3개 column */
grid-template-rows: 1fr 1fr; /*동일 크기의 2개 row */
}
.child{
background-color: white;
}
위 CSS를 반영하면 아래와 같은 결과가 출력된다.
다음과 같이, 6개의 사전 형성된 grid cell을 html에서 생성된 5개의 item(child)가 위에서부터 차지해나가고, 맨 마지막 cell은 비게 된다.
이제 위에서 말한 두가지 방법으로 grid의 item을 지정해보자.
부모 요소에서 지정: grid-template-areas 이용
부모요소인 parent에 grid-template-areas라는 속성을 부여한 뒤, 이를 통해 임의의 item 이름을 지정해주는 방식이다.
1개 row당 " " 의 큰따옴표를 차지하고, 그 안에 column들을 지정해주고 각 column은 띄어쓰기로 구분한다.
예를 들어 우리가 지정하고자하는 grid는
parent{
/* 이외 코드 생략 */
grid-template-areas: "A B C"
"A D E"
}이와 같은 식으로 표현된다.
이를 통해 각각의 grid item은
이와 같은 식으로 위치를 지정받게 된다.
다음으로는 각각의 자식요소들에게 미리 지정된 grid item들을 할당해줘야한다.
이 때는 grid-area 를 이용한다.
.child:first-child{
grid-area:A;
}
.child:nth-child(2){
grid-area:B;
}
.child:nth-child(3){
grid-area:C;
}
.child:nth-child(4){
grid-area:D;
}
.child:nth-child(5){
grid-area:E;
}
실제 실행 결과는 다음과 같다.
자식 요소에서 지정: grid-column-start, grid-column-end, grid-row-start, grid-row-end
다음은 부모요소에서 별도로 area를 지정하지 않고, 자식요소에서 각각의 item이 어떤 cell을 점유할지 선택하는 방법이다.
grid의 선에는 각각의 번호가 위에서부터 아래로, 왼쪽에서 오른쪽으로 1번부터 할당된다.
grid item 1번의 경우, 세로선은 1 ~ 2에 해당하고, 가로선은 1 ~ 3에 해당한다.
이런 식으로 세로(column)의 시작과 끝선, 가로(row)의 시작과 끝선을 각 자식요소에서 지정하는 방식으로 grid 배치를 할 수 도 있다.
세로선은 grid-column-start, grid-column-end, 가로선은 grid-row-start, grid-row-end 로 지정할 수 있고, 이를 축약하여 grid-column, grid-row에 모두 적을 수도 있다.
예를 들어 첫번째 요소의 경우,
.child:first-child{
grid-column-start:1;
grid-column-end:2;
grid-row-start:1;
grid-row-end:3;
}또는,
.child:first-child{
grid-column: 1 2;
grid-row:1 3;
}이와 같은 축약형으로 적을 수 있다.
grid 영역 배치는 CSS 그리드의 가장 기본적인 내용이다. 이외에도 span을 사용하기도 하고, 반응형에서는 또 다른 방식들이 적용될 수 있겠지만, 우선은 위에서 다룬 내용들이 가장 기본이 된다.
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!