I am reading a few beginner books on CSS and wondering if below is possible with only css (no js) and how to achieve. given CSS is static, a variable container like ArrayList for cars isn't feasible?
Use css grid or flexbox for the layout, which is a stack of rows like this picture (forget the sky).
A row unit is a car row + a road row. Each car row has 3 slots. The road row is just one row of picture of a road.
I don't know how many cars will be included and want each car row to have 3 item containers to display the cars. I want some container like ArrayList to contain the cars, and that feeds the cars into the car rows for display. If the car ArrayList increases, a new car row (and accompanying road row) will be automatically added.
For example, the css will start with 1 car row and road row, as the car ArrayList is appended with cars, each car will be inserted in the car row; as the List goes to 4, a new car/road row will be dynamically added. Think of it like a digital car toy shelf for a kid; the kid will keep track of his car toys in a list, whose contents will be inserted into a pre-designed shelf, one that the kid never has to touch.
Use css grid or flexbox for the layout, which is a stack of rows like this picture (forget the sky).
A row unit is a car row + a road row. Each car row has 3 slots. The road row is just one row of picture of a road.
I don't know how many cars will be included and want each car row to have 3 item containers to display the cars. I want some container like ArrayList to contain the cars, and that feeds the cars into the car rows for display. If the car ArrayList increases, a new car row (and accompanying road row) will be automatically added.
For example, the css will start with 1 car row and road row, as the car ArrayList is appended with cars, each car will be inserted in the car row; as the List goes to 4, a new car/road row will be dynamically added. Think of it like a digital car toy shelf for a kid; the kid will keep track of his car toys in a list, whose contents will be inserted into a pre-designed shelf, one that the kid never has to touch.
Last edited:
