Fri, 2023-05-12 16:09
I have a very simple 3 x 10 grid that is populated via JavaScript. The displayed information is memorial information for a cemetery. The first column contains title heading (Name, Nickname, Birth-date, etc.) for the data elements of the second column. The third column is a 1 / span 9 type that contains an image and button links to activate individual modals. Here is the HTML code. I have removed some of the code for simplicity.
<div id="info_Wrapper"> <div id="info_Title_Name"></div> <div id="info_Data_Name"></div> <div id="info_Title_Nickname"></div> <div id="info_Data_Nickname"></div> <div id="info_Title_Date-Birth"></div> <div id="info_Data_Date-Birth"></div> <!-- Elements removed for simplicity --> <div id="info_ImgBtns"> <div id="info_Image"></div> <div id="info_Buttons"> <div id="btn_Obituary"> <button id="btn_Obituary" type="button" data-toggle="modal" data-target="#viewObituary" class="btn btn-primary btn-sm btn-obit center-block" style="min-width:130px">Obituary</button> </div> </div> </div> <div id="info_Foot"> <div id="info_Foot_Display" class="notethis whisper center">Click on an image for a larger view.</div> <div id="info_Foot_GenWeb" class="center"></div> <div id="info_Foot_Timestamp" class="whisper center"></div> </div> </div>
Here is the CSS code...
#info_Wrapper { display: grid; grid-template-columns: max-content 2fr 1fr; column-gap: 1rem; grid-template-rows: repeat(10, minmax( 5px auto )); row-gap: 0; grid-template-areas: "title-name data-name info-imgbtns" "title-nickname data-nickname info-imgbtns" "title-date-birth data-date-birth info-imgbtns" "title-date-death data-date-death info-imgbtns" "title-marriage data-marriage info-imgbtns" "title-burial data-burial info-imgbtns" "title-directions data-directions info-imgbtns" "title-citizen data-citizen info-imgbtns" "title-images data-images info-imgbtns" "info-foot info-foot info-foot"; padding: 2rem 0 0 2rem; } #info_Title_Name { grid-area: title-name; grid-row: row 1; } #info_Data_Name { grid-area: data-name; grid-row: row 1; color: var(--brand-accent); font-weight: 700; } #info_Title_Nickname { grid-area: title-nickname; grid-row: row 2; &:empty { display: none; } } #info_Data_Nickname { grid-area: data-nickname; grid-row: row 2; &:empty { display: none; } } #info_Title_Date-Birth { grid-area: title-date-birth; grid-row: row 3; } #info_Data_Date-Birth { grid-area: data-date-birth; grid-row: row 3; } // ... items removed for simplicity #info_ImgBtns { grid-area: info-imgbtns; grid-row: row 1 / span 9; }
Everything works fine in most cases. But there are some instances where information for a field is not available (e.g., Nickname) so I desire to remove/collapse the row. Note that for the Nickname, if empty, the display is none. This doesn't display the contents of the row but still leaves space in the grid for the row.
I have tried various ways to structure the grid-template-rows but nothing seems to work. I'm wondering if the issue is with the third column. Only the first row of the column contains data and it is 'grid-row: row 1 / span 9'. If this is the case, what is the fix?
For further clarification... there are other rows, not included in the code above, that might not contain data that thus would need to be removed. But the same fix should apply.
Thanks in advance for any assistance provided.
jdadwilson
