화면 구성하기 - grid 의 정렬 : content와 items

flex와 같이, grid에도 각 행과 열을 정렬하는 속성이 존재합니다.

오늘은 이를 알아보겠습니다.

 

 

 

 

Grid의 content와 items

grid에서도 justify-content가 존재합니다.

속성에 적용하는 값 또한 flex와 동일합니다.

start, center, end 그리고 space-between, space-around, space-evenly 등이 존재합니다.

 

그렇다면, grid에서는 어떤 기준으로 정렬을 하는지 알아보겠습니다.

1

2

3

4

5

6

7

8

9

샘플 입니다.

.grid-container{
    width: 600px;
    height: 600px;
    margin: 0 auto;
    display: grid;
    grid-template-rows : 150px 150px 150px;
    grid-template-columns: 150px 150px 150px;
    border:2px solid black;
    background-color: #ffeded;
}

.grid-item{
    width: 100px;
    height: 100px;
    border: 2px solid black;
    background-color: gray;
    box-sizing: border-box;
}

.item{
    width: 80px;
    height: 80px;
    background-color: yellow;
    font-size: 20px;
    font-weight: bolder;
    text-align: center;
    line-height: 80px;
    border: 2px solid white;
    box-sizing: border-box;
}

<div class="main-container">
    <div class="grid-container">
        <div class="grid-item">
            <div class="item"> 1 </div>
        </div>
        <div class="grid-item">
            <div class="item"> 2 </div>
        </div>
        <div class="grid-item">
            <div class="item"> 3 </div>
        </div>
        <div class="grid-item">
            <div class="item"> 4 </div>
        </div>
        <div class="grid-item">
            <div class="item"> 5 </div>
        </div>
        <div class="grid-item">
            <div class="item">6</div>
        </div>
        <div class="grid-item">
            <div class="item">7</div>
        </div>
        <div class="grid-item">
            <div class="item">8</div>
        </div>
        <div class="grid-item">
            <div class="item">9</div>
        </div>        
    </div>
</div>

적용 스타일과 html입니다.

 

.grid-container 에 justify-content : center와 space-between을 적용해보겠습니다.

1

2

3

4

5

6

7

8

9

1

2

3

4

5

6

7

8

9

justify-content: center; 는 행쪽 cell의 정렬이 가운데로 몰렸고,

justify-content: space-between;는 행마다 간격을 둔 채 정렬되었습니다.

 

이와 같이 justify-content;는 행쪽 cell의 정렬을 설정합니다.

 

grid에는 justify-items 또한 존재합니다.

align-items와 같이 stretch, start, center, end 로 존재합니다.

justify-items: center를 적용해보도록 하겠습니다.

1

2

3

4

5

6

7

8

9

구분을 쉽게 하기 위해 본래 차지하는 영역을 테두리씌워보았습니다.

justify-content 와의 차이점을 아시겠나요?

justify-items는 justify-content와는 달리 셀이 아닌 셀 내부의 아이템을 정렬합니다

 

열방향은 align-content와 align-items를 사용합니다.

align-content와 align-items 또한 마찬가지로,

content는 그리드 셀을, items는 그리드 셀 내부의 아이템을 정렬합니다.

 

따라서 content와 items를 사용하기 위해서

content는 아이템은 그대로 둔 채 셀 자체를 옮기기 때문에 셀 외부에 여유공간이 존재해야 하고,

items는 셀은 그대로 둔 채 내부 아이템을 정렬하기 때문에 셀 내부에 여유공간이 존재해야 합니다.

 

아래 표는 justify-content와 justify-items, align-content와 align-items의 차이점을 정리한 표 입니다.

content(셀 정렬)

items(셀 내부 아이템정렬)

justify(행방향 = 가로)

셀들의 가로 정렬

아이템의 가로방향 정렬

align(열방향 = 세로)

셀들의 세로 정렬

아이템의 세로방향 정렬