CSS layout questions

Discussion in 'App Development' started by blueraincap, Apr 27, 2020.

  1. 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).[​IMG]
    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: Apr 27, 2020
  2. Baron

    Baron Administrator

    You'll want to use Flexbox for that. It has better browser support than CSS Grid, so that's what I recommend you learn and use for your layout.
     
    blueraincap likes this.
  3. Is there a way to separate the contents and the layout, so I can edit the car info in a container then each car element will be fed into the layout.
     
  4. Baron

    Baron Administrator

    Sure. No problem. But how you implement the car info variables that are wrapped by the layout will just depend on what language and/or framework you use to develop your application.
     
  5. No, it is not an application. The whole thing is static, only html/css, no queries to anywhere. I just wanna make it modular, contents in one place and layout another. The cars (contents) to feed into the flexbox slots (layout) for display, that's it.
     
  6. Baron

    Baron Administrator

    Ok, then you'd only need a HTML file for the document elements and data, and a CSS file for your flexbox layout and stylesheet info.
     
  7. Off-topic, approximately how much does hosting a site like this cost a month?
     
  8. Baron

    Baron Administrator

    I don't use a web host in the traditional sense like you're probably familiar with. I'm sure if you were starting out, $50 per month would be reasonable. But at this level when I'm running many servers and also outsourcing certain services to dedicated third-party providers, it's easy to spend a couple grand per month.
     
  9. #10     Apr 30, 2020
    zdreg likes this.