[css] 컴포넌트 배치를 grid를 사용해서

Edward Hyun·2021년 12월 9일
0

app&web-dev

목록 보기
37/178
post-custom-banner

수평 스크롤이 적용되도록 컴포넌트 배치 (v-for)를 2단으로 만들려는데
flex-box로는 불가능했다.

그래서 grid를 사용했음.
grid-template-columns: repeat(3, 1fr); // 여기서 3이 한 줄 칼럼의 갯수 --> 이 값을 vue에서 데이터를 받아서 length /2 한 값을 css 단으로 repeat (var () )로 처리해서 2단을 구현했음.

참고 :: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

profile
앱&웹개발(flutter, vuejs, typescript, react), 인공지능(nlp, asr, rl), 백엔드(nodejs, flask, golang, grpc, webrtc, aws, msa, nft, spring cloud, nest.js), 함수형 프로그래밍(scala, erlang)을 공부하며 정리합니다.

0개의 댓글