Grid spacing depending on row content

[grNadpa]

My page builds a billings history. A few billings are partial. For those that are partial, I want to remove the margin between / among the rows that apply to the same billing title.

Here is a word picture of what I have now. (I do not have the skill set for CodePen … sorry.)

(grid-template-columns: 7rem 4rem 4rem 6rem 6rem 7rem;)

row 1 contains 6 columns of column headings

row 2 contains 6 columns of billing information entitled “Initial Deposit”

row 3 contains 6 columns of billing information entitled “Masonry” for a partial billing

row 4 contains 6 columns of billing information also entitled “Masonry” for a later partial billing.

row 5 contains 6 columns of billing information entitled “Exterior” and so on.

All columns double spaced.

What I would like is rows containing the same title single spaced. In my example

row 2 (Initial Deposit) remains double spaced from column 1.

row 3 (Masonry) remains double spaced from column 2

row 4 (Masonry) is single spaced from column 3 (because it shares the Masonry title)

row 5 (Exterior) remains double spaced from column 4.

How would you handle this?

[Paulie_D]

A word picture isn’t really doing it. Do you have an image of what this is supposed to look like?

I’m not sure what you mean by “double spaced”.

There is no method to individualise grid gaps between row/columns.

[grNadpa]

Ah-h-h: “There is no method to individualise grid gaps between row/columns.”.

Not the answer I was hoping for.

So. I see two options given that the grid gaps between rows must remain the same.

I can simulate double spacing by defining every other row as grid-column: 1 / -1 with content ‘ ’

Or, I can abandon grid and use flexbox.

Do you see another alternative?

[Paulie_D]

Without an image of what it is you are trying to achieve it’s hard to offer suggestions.

A lot of this sounds like it should be a table.

[grNadpa]

“… sounds like it should be a table.”

That would be my first choice. So I gather I misunderstand the “separate presentation from content” maxim.

[Paulie_D]

So I gather I misunderstand the “separate presentation from content” maxim.

Not quite sure i get what you are saying here but there’s no reason not to use a table (certainly for some sections) when it’s tabular data being shown.

A listing of costs / charges etc. would fit that category I suspect, however, without a look at what you are trying to create, it’s hard to offer suggestions.

Do you have a design wireframe/image etc?

[grNadpa]

Do you have a design wireframe/image etc?

Yes, but I do not know how to attach it to this forum.

[grNadpa]

Just a followup to Paulie_D’s reply that:

there’s no reason not to use a table (certainly for some sections) when it’s tabular data being shown.

Embedding that tabling not only simplified my HTML5 presentation but eased generating the view through php.

Thank you Paulie_D

[Author]

Posts