창의 너비에 따라 한 줄에서 보이는 카드의 개수를 맞춥니다.
확인하려면 JSFiddle(https://jsfiddle.net/eoureo/hd53k4sb/)에서 보면서 Result 프레임의 너비를 바꿔보면 됩니다.
- 수평 스크롤바가 나오지 않도록 하였습니다.
- 가운데 정렬되도록 했습니다.
- 카드 너비를 200px로 하고 창 너비가 400-2200px까지 200px마다 카드의 개수가 바뀝니다.
다음 소스코드를 바꾸었습니다.
(참고로 W3Schools How TO - Code snippets for HTML, CSS and JavaScript (https://www.w3schools.com/howto/)에는 좋은 내용들이 많네요.)
How To Create Column Cards https://www.w3schools.com/howto/howto_css_column_cards.asp
How To Create Column Cards
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com