Problem with CSS Grid Headers Not lining Up With Content...Stumped...

Hi all, I have a layout issue using CSS grids with template columns, see image: Where I have the headers, Roll, Weapon etc. you can see the underlying rows do not match up. The headers are <span> tags and the rows underneath are <div>s with the same CSS classes applied, but as you can see from the pic there's a width problem going on where the headers become progressively offset... The <span> header and various <input> tags for the rows tags have no particular width styling... The <div>s have these rules: Header: <div class="sheet-laf-centredgrid sheet-laf-weaponlist sheet-bold"> Row: <div class="sheet-laf-centredgrid sheet-laf-weaponlist sheet-redborder"> And the CSS rules are: .sheet-laf-centredgrid {     margin-left: auto;     margin-right: auto;     display: grid;     column-gap: 10px; } .sheet-laf-weaponlist { grid-template-columns: 0.3fr 2fr 0.75fr 1fr 1fr 0.5fr 0.5fr 0.5fr 0.5fr 0.5fr 0.7fr; margin-bottom: 3px; }   .sheet-redborder { border: red solid 1px !important; padding: 2px; } Nothing particularly controversial... Any ideas? Know its hard without the full code, I'm just wondering if there's some general gotcha around sdpans, inputs, padding, margins, grid calculation etc. etc. Thanks, ~ Coryphon ~

My guess is that the parent element of the non-repeating section vs the repeating section are not similarly setup.  Perhaps their widths are not the same?  ie the "fr" column widths would probably layout different if one container had 800px available vs another with only 790px (even if both are set to width: 100%, "available" width could still be different).  Just guessing without more code, but that's something I would look at.  Cheers

vÍnce said: My guess is that the parent element of the non-repeating section vs the repeating section are not similarly setup.  Perhaps their widths are not the same?  ie the "fr" column widths would probably layout different if one container had 800px available vs another with only 790px (even if both are set to width: 100%, "available" width could still be different).  Just guessing without more code, but that's something I would look at.  Cheers Thank you very much, I'll look into that, ~ C ~