css) grid에 대해서 (flex와 구별해서 사용하기!)

 

 

 

포트폴리오를 만들면서 아래 갤러리 같은 콘텐츠를 만들었다.

처음에 아무생각없이 flex 스타일을 만들었는데, 다시 보니 이 화면은 flex보다는 grid를 쓰는게 맞는 화면!

 

심지어 두개의 콘텐츠씩 div로 묶어둬서 유지보수성도 되게 안좋게 만들었다.

빨리 성과를 내고 싶은 마음에 깊게 생각하지 못하고 만들어버렸다. 😥

 

그럼 나의 포트폴리오 화면을 flex에서 grid로 수정해보겠다!

수정하는 겸 아래와 같이 테스트 파일을 만들어 정리해보았다

 

 

✅ HTML

 <div class="grid-wrap">
    <div class="grid-box">1</div>
    <div class="grid-box">2</div>
    <div class="grid-box">3</div>
    <div class="grid-box">4</div>
    <div class="grid-box">5</div>
    <div class="grid-box">6</div>
  </div>

 

 

✅ CSS

.grid-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
.grid-box {
    width: 100%;
    height: 300px;
  }

 

 

제일 중요한 부분은 .grid-wrap부분이다.

 

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 10px;

 

 

이 세 줄이 제일 중요하다.

gap은 grid-box 여백간의 간격을,

grid-template-columns는 1줄에 2개를 넣겠다라는 뜻으로 repeat(2, 1fr을 써주었다. )

 

 

 

그러면 나의 포트폴리오 UI는 바뀌지 않지만 수정된 마크업과 적용된 스타일만 바뀐다.

이제 컨텐츠를 하나 더 추가하거나 혹은 더 하나 삭제해도 UI가 틀어지지 않는다!

 

 

---

 

 

📌 grid-template-columns 다양한 방식으로 사용하기

 

1. 고정 픽셀 값으로 나누기

grid-template-columns: 300px 300px 300px;

➡️ 1줄에 3개의 가로 300px 컬럼

 

 

 

2 . 비율로 나누기

grid-template-columns: 1fr 1fr 1fr;

➡️ 3개의 컬럼을 동일한 비율로 나눈다. (위의 코드는 3등분)

 

 

 

3. px + 비율 섞어서 사용

grid-template-columns : 200px 1fr 2fr;

➡️ 첫번째 컬럼은 200px 그리고 나머지 남은 부분은 1:2의 비율로 영역을 나눈다.

 

 

4. repeat() 일정한 값을 고정하여 반복하기

grid-template-columns: repeat(3, 1fr);

➡️ 1줄을 3개의 영역으로 동일한 비율로 나눈다.

 

 

 

5. repeat(auto-fill) 자동으로 채워지게 하기

grid-template-columns: repeat(auto-fill, 200px);

➡️ 박스가 화면 너비에 맞게 채워진다. 화면 너비가 줄어들면 박스는 아래로 떨어진다.

 

 

 

6. repeat(auto-fit) 빈공간 알아서 맞춰주기

grid-template-columns : repeat(auto-fit, minmax(200px, 1fr));

➡️ 박스가 화면 너비에 맞게 채워진다. 화면 너비가 줄어들면 박스의 너비가 줄어든다.

 

 

 

7. minmax()

grid-template-columns: minmax(300px, 400px) 1fr;

➡️ 첫번째 컬럼은 200-400px 사이에서 반응형으로 변경

 

 

 

8. fit-content()

grid-template-columns: fit-content(250px);

➡️  콘텐츠 크기가 250px을 넘지 않게 맞춘다. 콘텐츠가 어느정도 있어야함.

만약에 해당영역에 콘텐츠가 비어있거나 적은양이 있따면 오른쪽 처럼 나온다.

 

 

앞으로 grid도 잊지말고 실무에서 적극 활용해야지!