In this episode, we focus on making our board columns more functional by fitting cards neatly inside each column. To get started, we split out our cards into their own component—this is a good move for later on when we want each card to have its own logic, like drag-and-drop features.
Next, we loop through a set of cards for each column (just using some dummy data for now), setting up basic styling so that the cards look decent. We give the cards a background, some rounded corners, padding, and set the cursor to a pointer to hint that they'll be draggable later.
The main challenge we tackle is keeping the cards inside the visible area of their column. Instead of the page scrolling, we want the card list itself to scroll vertically within the column—while the columns keep their own horizontal scrolling, just like a kanban board.
We fix up the column styling so that there's proper spacing and padding, and then we set overflow on the Y axis to make sure the cards become scrollable when there are too many to fit at once. We also make sure the "Create Card" button always stays at the bottom of the column, by switching our flex layout to a column direction.
Finally, to make the board feel more realistic and dynamic, we randomize the number of cards in each column. This gives the board a more natural feel, with some columns full and scrollable, and others only partly filled. The end result: a nicely styled, scrollable set of cards in each board column, setting us up for more interactivity later on!