[CSS] grid를 활용한 반응형 레이아웃

'flex'를 활용하여 반응형 레이아웃을 만들던 중 같은 크기의 아이템들을 유동적이고 순차적으로 나열하려고 했을 때, 다음과 같은 문제가 발생했다.

 

WISH

• 아이템 넓이는 기본 240px
• 아이템들이 화면 크기에 따라 적절하게 정렬되며, 화면에 꽉차게 유동적으로 크기가 변했으면 함
• 모든 아이템의 크기가 동일했으면 함

PROBLEM

• 행에 배치된 아이템들끼리 무조건 화면에 꽉차게 크기를 조정하기 때문에, 행마다 아이템 크기가 다를 수 있음

<style>

.item-box {
    display: flex;
    gap: 15px 20px;
    width: 100%;
    flex-wrap: wrap;
}

.item {
    border: 3px solid green;
    flex: 1 0 240px; /* flex-grow flex-shrink flex-basis */
    height: 100px;
    line-height: 100px;
    text-align: center;
}

</style>

<div class="item-box">
    <div class="item">logo1</div>
    <div class="item">logo2</div>
    <div class="item">logo3</div>
    <div class="item">logo4</div>
    <div class="item">logo5</div>
    <div class="item">logo6</div>
    <div class="item">logo7</div>
</div>

1080 해상도 (flex)

798 해상도 (flex)

 

이러한 현상은 'flex'가 1차원적으로 한 방향으로만 요소를 배치할 수 있는 특성때문에 발생한 것이다.
(요소 배치 방향 row, column 둘 중에 하나만 선택 가능)

 

여기서 2차원적으로 가로, 세로 방향을 동시에 설정할 수 있는 'grid'를 사용하면 해결할 수 있다.

구현한 코드는 다음과 같다.

<style>

.item-box {
    display: grid; 
    width: 100%;
    gap: 15px 20px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.item {
    border: 3px solid green;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

</style>

<div class="item-box">
    <div class="item">logo1</div>
    <div class="item">logo2</div>
    <div class="item">logo3</div>
    <div class="item">logo4</div>
    <div class="item">logo5</div>
    <div class="item">logo6</div>
    <div class="item">logo7</div>
</div>

1080 해상도 (grid)

798 해상도 (grid)

** grid-template-columns: 각 열(track)의 크기 지정

• track: grid 컨테이너의 행/열

• repeat(repeat count, tracks)
  • repeat count: track 목록이 반복되어야하는 횟수
    - auto-fill: track 개수를 grid 컨테이너, 행/열 크기에 맞게 자동적으로 조절
  • tracks: track 크기 설정
    - minmax(min, max): track 크기 최소/최댓값
    - fr: grid 컨테이너의 여유 공간을 비율로 나눠 설정

 

 

 

 

참고

• https://heropy.blog/2019/08/17/css-grid/

• https://yamoo9.gitbook.io/css-grid/css-grid-guide