[Django] 장고 부트스트랩 Grid - 인스타 클론코딩

📍 부트스트랩 Grid

현재 나의 index페이지는 1줄에 card 1개씩 페이지가 꽉차게 나오는 상황이다.

(여백없이 사진만 덩그러니 페이지를 꽉 채우니 부담스럽다..)

 

부트스트랩의 그리드를 적용해 1줄에 card가 2개씩 나오도록 설정해보려 한다.

(실제 인스타는 1개씩 나오지만 사이드를 채울만한 기능을 추가할 계획이 없기 때문에 나는 2개씩 채우려 한다.)

 

https://getbootstrap.kr/docs/5.0/layout/grid/

그리드 시스템

 

부트스트랩 공식홈페이지를 참고하여 적용한 결과!

 

col조절, margin조절

# _card.html

<div class="card my-3 col-12 col-md-5 mx-2">

 

중앙 정렬

# index.html

<div class="row justify-content-md-center">

 

 

1줄에 3개도 가능!

# _card.html

<div class="card my-3 col-12 col-md-3 mx-2">