이전 글에는 grid 의 구성요소에 대해 알아보았습니다.
이번 글에는 grid의 구성요소를 어떻게 설정하는지 알아보겠습니다.
grid-template-rows, grid-template-columns
두 속성은 grid의 row와 column의 개수, 그리고 각각의 길이 등을 설정하는데 사용합니다.
각 칸마다 길이를 적어 나열하는 방식으로 간편하게 사용할 수 있습니다.
2×3 grid container를 만드는 css
#grid-container{
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
위 코드에서 fr 은 그리드 컨테이너의 여유 공간을 상대적으로 표현한 단위입니다.
grid-template-rows: 1fr 1fr; 은 곧 행의 개수는 2개며, 여유공간을 1 : 1 로 할당한다는 뜻이고,
grid-template-colums: 1fr 1fr 1fr 은 열의 개수는 3개, 여유공간을 1: 1: 1로 할당한다는 뜻입니다.
위처럼 fr로 표시하지 않고 px와 같은 단위를 사용할 수도 있으며,
이 경우 고정 길이를 먼저 할당한 뒤 남은 길이를 fr 에따라 나눠줍니다.
예를 들어 길이가 500px 일때,
1fr 200px 2fr; 로 설정이 되어있다면,
200px 길이를 먼저 할당한 뒤, 남은 300px 를 1:2 로 나눠가져
실질적으로 100px 200px 200px 의 길이가 됩니다.
아래 예시코드를 통해 확인해보도록 하겠습니다.
예시 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main-container{
width: 600px;
height: 600px;
margin: 0 auto;
border: 2px solid black;
}
#grid-container{
width: 100%;
height: 100%;
position: relative;
grid-area: grid;
display: grid;
grid-template-rows: 1fr 2fr;
grid-template-columns: 1fr 300px 2fr;
border: 2px solid black;
}
.item{
color: white;
font-size: 20px;
width:100%;
height:100%;
box-sizing: border-box;
border: 2px solid white;
}
#item1{
background-color: red;
}
#item2{
background-color: blue;
}
#item3{
background-color: green;
}
#item4{
background-color: indianred;
}
#item5{
background-color: teal;
}
#item6{
background-color: navy;
}
</style>
</head>
<body>
<div id="main-container">
<div id="grid-container">
<div class="item" id="item1"> item1 </div>
<div class="item" id="item2"> item2 </div>
<div class="item" id="item3"> item3 </div>
<div class="item" id="item4"> item4 </div>
<div class="item" id="item5"> item5 </div>
<div class="item" id="item6"> item6 </div>
</div>
</div>
</body>
</html>
2개의 행을 만들고 1: 2의 길이로 나누고
3개의 열을 만든뒤 가운데 열은 300px, 나머지 열은 1:2 로 나눈 코드입니다.
위 코드의 결과는 아래와 같이 나옵니다.
f12를 통해 길이를 직접 확인할 수 있습니다.
실행 결과
이렇게 하나의 행렬에는 하나의 아이템을 할당할 수 있습니다.
그렇다면, 여러개의 행렬에 하나의 아이템을 할당하기 위해서는 어떻게 해야할까요?
grid-template-areas
grid-template-areas는 grid 내의 아이템들의 배치를 지정해주는 속성입니다.
각 아이템들에 별칭을 지정한 뒤, 원하는 위치에 배치하고자 하는 아이템의 별칭을 설정하면 됩니다.
아이템의 별칭은 grid-area를 사용하여 지정할 수 있습니다.
예시코드
#grid-container{
width: 100%;
height: 100%;
position: relative;
grid-area: grid;
display: grid;
grid-template-rows: 1fr 2fr 300px;
grid-template-columns: 1fr 300px 2fr;
border: 2px solid black;
grid-template-areas:
"item1 item2 item6"
"item5 item3 item3"
"item4 item4 item4";
}
#item1{
background-color: red;
grid-template-area:item1;
}
#item2{
background-color: blue;
grid-template-area:item2;
}
#item3{
background-color: green;
grid-template-area:item3;
}
#item4{
background-color: indianred;
grid-template-area:item4;
}
#item5{
background-color: teal;
grid-template-area:item5;
}
#item6{
background-color: navy;
grid-template-area:item6;
}이전의 예시코드에서, 다음 css 만 일부 수정하였습니다.
#grid-container에는 grid-template-areas를 추가하였고, 3x3으로 바꿨습니다.
item들에는 grid-area로 별칭을 지정하였습니다.
실행결과
위와 같이 지정한 칸에 맞는 별칭을 가진 item이 지정되었습니다.
또한, 인접한 행이나 열에 같은 별칭을 지정하여 여러 행이나 열을 차지할 수도 있습니다.
'웹 프론트 엔드 정리본' 카테고리의 다른 글
| 화면 구성하기 - 박스모델의 구조 (0) | 2024.10.21 |
|---|---|
| 화면 구성하기 - grid 의 정렬 : content와 items (0) | 2024.10.18 |
| 화면 구성하기 - grid (0) | 2024.10.14 |
| 화면 구성하기 - flex direction과 다양한 정렬방법 (0) | 2024.10.11 |
| 화면 구성하기 - FlexBox 모델 (0) | 2024.10.09 |
