화면구성하기 - grid template : rows,columns,areas

웹 프론트 엔드 정리본

화면구성하기 - grid template : rows,columns,areas

tadigrada 2024. 10. 16. 12:29

이전 글에는 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를 통해 길이를 직접 확인할 수 있습니다.

실행 결과

item1

item2

item3

item4

item5

item6

이렇게 하나의 행렬에는 하나의 아이템을 할당할 수 있습니다.

그렇다면, 여러개의 행렬에 하나의 아이템을 할당하기 위해서는 어떻게 해야할까요?

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로 별칭을 지정하였습니다.

실행결과