Issue with CSS Grid Heights

HTML-CSS
1

My website provides genealogical information for individuals doing family research. One page presents Memorial burial information of those buried in my particular county of interest.

The information displayed is in a CSS Grid that is 3 columns by 9 rows. The first column 2 columns contain 9 rows and the third column contains just 1 row spanning the 9 rows. Something like this…

Title1 - Data1 - Image/Buttons
Title2 - Data2 - Image/Buttons
Title3 - Data3 - Image/Buttons
Title4 - Data4 - Image/Buttons
Title5 - Data5 - Image/Buttons
Title6 - Data6 - Image/Buttons
Title7 - Data7 - Image/Buttons
Title8 - Data8 - Image/Buttons
Title9 - Data9 - Image/Buttons

Everything works smoothly… almost.

If the height of the Image/Buttons (which is variable) is greater than the height of the TitleN - DataN rows the area containing the Title/Data info expands to the height of the Image/Buttons area causing the spacing of the Title/Data area to go bonkers.

This is a screen shot of a Memorial record with bad spacing. Note the extra space before the Burial info. There should be ‘some’ space but not as much as shown.

Bad_Spacing
Bad_Spacing1001×432 180 KB

Is this something that can be fixed or do I just have to ‘live with it’?

I will provide a link to the two Memorials if desired. Will need to do it privately as this post will not allow the links for some reason.

TIA for any assistance

2

Could you send your HTML and CSS (replacing private information with false information). It’s really hard to help someone when you can’t see their code.

Thanks.

3

Ben, thanks for your reply. Here are the files. Both are rather long. If you need I can send the files to you personally, or give you links to the website (example of the good and bad formatting issue).

The site is somewhat structured along the lines of the MVC model so there is a lot of JS code as well as AJAX calls to the Db.

Again, thanks!

    <main role="main">

		<h1 id="page_Heading"></h1>

        <section id="meml_Wrapper">

            <aside id="meml_Head" style="display: block"></aside>

			<aside id="meml_Info" style="display: block">

				<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>

					<div id="info_Title_Date-Death"></div>
					<div id="info_Data_Date-Death"></div>

					<div id="info_Title_Marriage"></div>
					<div id="info_Data_Marriage"></div>

					<div id="info_Title_Burial"></div>
					<div id="info_Data_Burial"></div>

					<div id="info_Title_Directions"></div>
					<div id="info_Data_Directions" hidden>
						<button type="button" data-toggle="modal" data-target="#cemDirections"
								class="btn btn-primary btn-sm btn-obit">Directions</button>
					</div>
					
					<div id="info_Title_Citizen-TX"></div>
					<div id="info_Data_Citizen-TX"></div>
					
					<div id="info_Title_Images"></div>
					<div id="info_Data_Images"></div>

					<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 id="btn_Inscription">
								<button id="btn_Inscription" type="button" data-toggle="modal" data-target="#viewInscription"
										class="btn btn-primary btn-sm btn-obit center-block" style="min-width:130px">Marker Inscription</button>
							</div>

							<div id="btn_Mil-Inscription">
								<button id="btn_MilInscription" type="button" data-toggle="modal" data-target="#viewMilInscription"
										class="btn btn-primary btn-sm btn-obit center-block" style="min-width:130px">Military Inscription</button>
							</div>
							<!--
							<div id="btn_Death-Certificate">
								<button id="btn_DeathCert" type="button" data-toggle="modal" data-target="#viewDeathCert"
										class="btn btn-primary btn-sm btn-obit center-block" style="min-width:130px">Death Certificate</button>
							</div>
							-->
							<div id="btn_Family-Relations">
								<button id="btn_RelFamily" type="button" data-toggle="modal" data-target="#viewFamilyRelations"
										class="btn btn-primary btn-sm btn-obit center-block" style="min-width:130px">Family Relations</button>
							</div>

							<div id="btn_Research-Notes">
								<button id="btn_ResNotes" type="button" data-toggle="modal" data-target="#viewResearchNotes"
										class="btn btn-primary btn-sm btn-obit center-block" style="min-width:130px">Research Notes</button>
							</div>

							<div id="btn_Military-Notes">
								<button id="btn_MilNotes" type="button" data-toggle="modal" data-target="#viewMilitaryNotes"
										class="btn btn-primary btn-sm btn-obit center-block" style="min-width:130px">Military Notes</button>
							</div>

							<div id="btn_Family-Pages">
								<button id="btn_FamilyPage" type="button" data-toggle="modal" data-target="#viewFamilyPage"
										class="btn btn-primary btn-sm btn-obit center-block" style="min-width:130px">Family Page</button>
							</div>

							<div id="btn_More-Photos">
								<a id="btn_Album" type="button" data-toggle="modal" href="#"
										class="btn btn-primary btn-sm btn-obit center-block" style="padding-top: 2px; min-width:130px; display: none;">More Photos</a>
							</div>

							<div id="btn_Biography">
								<button id="btn_BioInfo" type="button" data-toggle="modal" data-target="#viewBioInfo"
										class="btn btn-primary btn-sm btn-obit center-block" style="min-width:130px">Biographical Info</button>
							</div>
							
							<div id="btn_ImgCredits">
								<button id="btn_BioInfo" type="button" data-toggle="modal" data-target="#viewImgCredits"
										class="btn btn-primary btn-sm btn-obit center-block" style="min-width:130px">Image Credits</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>

			</aside>

            <aside id="meml_Foot" class="notethis whisper"></aside>

        </section>

	</main>

This is the SCSS file…

//  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< - >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Mixin Helpers
@import "../helpers/_helpers.scss";

//  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< - >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Mrmorial Grid
#meml_Wrapper {
	display: grid;
    grid-template-columns: 1fr;
	column-gap: 0;
	row-gap: 0;
	grid-template-areas:
		"meml-head"
		"meml-info"
		"meml-foot";
	padding: 0 30rem 0;
}
	#meml_Head {
		grid-area: meml-head;
		grid-row: row 1;
	}
	#meml_Info {
		grid-area: meml-info;
		grid-row: row 2;
	}
	#meml_Foot {
		grid-area: meml-foot;
		grid-row: row 3;
	}

#info_Wrapper {
	display: grid;
	grid-template-columns: max-content auto max-content;
	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 2rem 0.5rem;
}
	#info_Title_Name {
		grid-area: title-name;
		grid-row: row 1;
	}
		#info_Data_Name {
			grid-area: data-name;
			grid-row: row 1;
			color: var(--accent-red);
			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;
		}

	#info_Title_Date-Death {
		grid-area: title-date-death;
		grid-row: row 4;
	}
		#info_Data_Date-Death {
			grid-area: data-date-death;
			grid-row: row 4;
		}

	#info_Title_Marriage {
		grid-area: title-marriage;
		grid-row: row 5;
	}
		#info_Data_Marriage {
			grid-area: data-marriage;
			grid-row: row 5;
		}

	#info_Title_Burial {
		grid-area: title-burial;
		grid-row: row 6;
	}
		#info_Data_Burial {
			grid-area: data-burial;
			grid-row: row 6;
		}

	#info_Title_Directions {
		grid-area: title-directions;
		grid-row: row 7;
	}
		#info_Data_Directions {
			grid-area: data-directions;
			grid-row: row 7;
		}
	
	#info_Title_Citizen-TX {
		grid-area: title-citizen;
		grid-row: row 8;
	}
		#info_Data_Citizen-TX {
			grid-area: data-citizen;
			grid-row: row 8;
		}

	#info_Title_Images {
		grid-area: title-images;
		grid-row: row 9;
	}
		#info_Data_Images {
			grid-area: data-images;
			grid-row: row 9;
		}

	#info_ImgBtns {
		grid-area: info-imgbtns;
		grid-row: row 1 / span 9;
	}

	#info_Foot {
		grid-area: info-foot;
		grid-row: row 10;
	}

//  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< - >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Memorial Styles
#meml_Head {
	@include box_Style ( $border: true, $shadow: true, $bg: var(--navbar-default-color-bg) );
	color: var(--base-white);
	font-family: var(--font-family-serif);
	font-size: var(--font-size-lg);
	font-style: italic;
	font-weight: 400;
	text-align: center;
	letter-spacing: 1px;
	border-radius: 10px 10px 0 0;
	border-color: var(--navbar-default-color-bg);
	border-width: 3px;
	margin-bottom: 0;

	&::before {
		content: 'Memorial Information';
	}
}

#meml_Info {
	@include box_Style ( $border: true, $shadow: true, $bg: var(--box-shadow-bg-mem) );
	border-radius: 0;
	border-color: var(--navbar-default-color-bg);
	border-width: 3px;
	margin: 0 0 1rem;
	width: 100%;
}

#info_Title_Name,
#info_Title_Nickname,
#info_Title_Date-Birth,
#info_Title_Date-Death,
#info_Title_Marriage,
#info_Title_Burial,
#info_Title_Directions,
#info_Title_Citizen-TX,
#info_Title_Images {
	font-family: var(--font-family-sans-serif);
	font-size: var(--font-family-lg);
	font-weight: 700;
	text-align: right;
	height: 0;
}

#info_Title_Date-Birth,
#info_Title_Marriage,
#info_Title_Burial,
#info_Title_Citizen-TX,
#info_Title_Images,
#info_Data_Date-Birth,
#info_Data_Marriage,
#info_Data_Burial,
#info_Data_Citizen-TX,
#info_Data_Images {
	padding-top: 1.5rem;
	height: fit-content;
}
#info_Title_Name:empty,

#info_Title_Nickname:empty,
#info_Title_Date-Birth:empty,
#info_Title_Date-Death:empty,
#info_Title_Marriage:empty,
#info_Title_Burial:empty,
#info_Title_Citizen-TX:empty,
#info_Title_Images:empty,
#info_Data_Name:empty,
#info_Data_Nickname:empty,
#info_Data_Date-Birth:empty,
#info_Data_Date-Death:empty,
#info_Data_Marriage:empty,
#info_Data_Burial:empty,
#info_Data_Citizen-TX:empty,
#info_Data_Images:empty,
#info_Data_Display:empty,
#meml_Foot:empty {
	padding-top: 0;
	display: none;
	height: 0;
}	

#info_Buttons {
	padding-top: 1rem;
	
	&.btn-sm {
		width: 130px;
	}
}

#info_Foot_Display {
	margin: 1rem;
}
#info_Foot_GenWeb {
	font-size: var(--font-size-base);
}

//  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< - >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Directions Modal
#dir_Wrapper {
	display: grid;
	grid-template-columns: repeat(12, [col] 1fr);
	grid-column-gap: 0.5rem;
	grid-template-areas:
		"dir-left"
		"dir-right"
		"dir-bottom";
}
	#dir_Left {
		grid-area: dir-left;
		grid-column: col 1 / span 7;
		grid-row: 1;
		height: fit-content;
	}
		#meml_CemMapView {
			text-align: center;
			text-transform: capitalize;
		}
	#dir_Right {
		grid-area: dir-right;
		grid-column: col 8 / span 5;
		grid-row: 1;
		height: fit-content;

		& td { font-size: var(--font-size-base); }
	}
		#mapCemName {
			font-family: var(--font-family-serif);
			font-size: var(--font-size-base);
			text-align: left;
			margin-bottom: 1rem;
		}
		#mapLatLon {
			margin-bottom: 1rem;
		}

	#dir_Bottom {
		grid-area: dir-bottom;
		grid-column: col 1 / span 12;
		grid-row: 2;
		height: fit-content;
		
	}
	
	#meml_CemAssoc {
		padding-top: 1rem;
		border-top: var(--border-style-2);
		margin-top: 1rem;

		&::before {
			content: 'Association Information';
			color: var(--brand-accent);
			font-family: var(--font-family-serif);
			font-size: var(--font-size-base);
			font-weight: 700;
		}

		&:empty {
			display: none;
		}
	}

	#meml_CemNotes {
		padding-top: 1rem;
		border-top: var(--border-style-2);
		margin-top: 1rem;

		&::before {
			content: 'Cemetery Notes';
			color: var(--brand-accent);
			font-family: var(--font-family-serif);
			font-size: var(--font-size-base);
			font-weight: 700;
		}

		&:empty {
			display: none;
		}
	}

	#meml_CemMapView a {
		font-weight: 700;
	}

//  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< - >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Mil Inst Modal
#meml_MiltInst {
	text-align: center;
}

//  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< - >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Directions Modal
#meml_FmlyRelt {
	& dl {
		font-size: calc(dvar(--font-size-basej) - 2px);
		margin-bottom: 0;
	}

	& dt { margin-top: 1rem; }

	& dd { margin-left: 2rem; }
}

//  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< - >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Bio Modal
#meml_BioText p {
	font-family: var(--font-family-serif);
	font-size: var(--font-size-base);
	text-indent: 1.5rem;
	line-height: var(--line-height-computed);
	margin-top: 0;
	margin-bottom: 0;

	&.centerbold {
		font-family: var(--font-family-serif);
		font-size: var(--font-size-base);
		font-weight: 700;
		text-indent: 0;
		text-align: center;
	}
	&.noIndent {
		text-indent: 0;
	}
}

#btn_Album > a:hover {
    color: var(--base-white);
    background-color: var(--brand-accent);
	width: 70px;
	padding-top: 2px;
}

//  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< - >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Obit Modal
.obit_img {
	background-color: var(--base-white);
	padding: 2px;
	border: 2px solid var(--brand-accent);
    cursor: zoom-in;
}

#meml_ObitHead {
	font-family: var(--font-family-sans-serif);
	font-size: var(--font-size-md);
	font-weight: 700;
	text-align: left;
	//text-transform: capitalize;
	margin-bottom: 1rem;
}

#meml_ObitBody {
	column-count: 2;

	& p {
		font-family: var(--font-family-serif);
		font-size: var(--font-size-base);
		line-height: 130%;
		text-indent: 2rem;
		text-align: justify;
		margin-top: 0;
		margin-bottom: 0;

		&.noIndent,
		&.noIndentBold,
		&.noIndentBoldCaps,
		& span.noIndent {
			text-indent: 0;
		}

		&.noIndentBold {
			font-weight: 700;
		}

		&.noIndentBoldCaps {
			font-weight: 700;
			text-transform: uppercase;
		}
	}
}

#meml_ObitPub {
	font-family: var(--font-family-sans-serif);
	font-size: var(--font-size-sm);
	font-style: italic;
	
	&::before {
		content: 'Source: ';
		font-weight: 700;
	}
	
	&:empty { display: none; }
}

p.noPadTop {
	padding-top: 0;
}

//  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< - >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Media Breaks
@include media_Bp ( $screen-bp-lg, $screen-bp-xl ) {
	#meml_Wrapper {
		padding: 0 20rem 0;
	}
}

@include media_Bp ( $screen-bp-md, $screen-bp-lg ) {
	#meml_Wrapper {
		padding: 0 10rem 0;
	}
}

@include media_Bp ( $screen-bp-xs, $screen-bp-md ) {
	#meml_Wrapper {
		padding: 0 5rem 0;
	}
}

@include media_Bp ( $screen-bp-xs, $screen-bp-sm ) {
	#meml_Wrapper {
		padding: 0 1rem 0;
	}
}
4

Sorry so long in getting back with you James. I was off the computer for the night.

Yes, sending the files personally, or linking to0 the website would be helpful, but I’ll see what I can do with the code you’ve sent, until you get back with me.

Just a note, if this is a JS question I won’t be much help. I don’t know much JS yet though I’m working on learning it.

5

Ya, you had better link me to the website. Understandably, you didn’t sent me your HTML’s head. Thus I can’t link the HTML and CSS.

Right now I’m coding my own head for it.

6

No, I need all your code. All I can get to show up on the screen right now is this:
Screenshot 2024-02-24 092103

If you want you can even email me. Just message me privately and I’ll send you my email.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.