Css grid simplifying

[kuipou]

I created an invoice in CSS grid though i think i took the long way around instead of the short one the problem i have is that the purple area is dynamical along with its cost so it could be one item as it could be 50 so i don’t know if i managed that part correctly as i would have wanted to have headers and footers for the invoices to stay in place and the invoice them selves to fill up

https://codepen.io/kuipou/pen/qKgpyz/ here’s my codepen any help would appreciated

[Paulie_D]

Codepen doesn’t load for me….can you simplify it.

[kuipou]

I resimplified it but i dont know why my grid isnt showing up though the css is all there

[Paulie_D]

There were some formatting issues and you had selected SASS instead of CSS.

I’m not sure what you have here, it seems to be some mishmash of both CSS & SASS.

Perhaps sort that out first…at least something shows up now.

https://codepen.io/Paulie-D/pen/VdNLwZ

Do you have an image of what this is supposed to look like?

[kuipou]

it’s supposed to look like this : https://imgur.com/nrz0Af0

originally my file is a sass file but for sake of breviety i copy pasted each file of my sass in one file to codepen

thought the Total cost should be at the bottom with an entire black line going down but since each item is added dynamically i didnt know if i code the grid right

[Paulie_D]

I’d take each part at a time…you seem to be mixing element names and id’s etc. so you might want make sure what is what.

It looks like the hard part is the lines on the invoice amounts which, as it turns out is pretty simple.

https://codepen.io/Paulie-D/pen/VdNLwZ

[kuipou]

Can you explain though how you did

when i look at it in Firefox it fails though and theres the black left border for cost that is missing but because no new element is added the bar wont appear right?

[Paulie_D]

I haven’t added all the borders….I’m sure you can add those to get the look you are after.

[kuipou]

Though why does it fails in firefox and can you explain what you did please?

[Paulie_D]

Looks OK to me in FF….but I’d have to rebuild quite a lot for full functonality and, unfortunately, I don’t have time right now.

I just used the basics…Chris has an excellent guide to CSS-Grid you can read.

Start with each component…don’t try to build the whole page in one go….

I’d also argue that you’re overusing sections/articles//asides/headers & footers. Most of the time, simple divs & spans will do; especially for something as simple as an invoice template.

[Author]

Posts