I’ve delved into CSS Grid and quite like it except that a simple page that I’ve built is being stubborn and for the life of me I can’t see why. There are 4 columns and 6 rows. The first two rolls lay out perfectly but rows 3-6 behave as if there’s a floated left object beside them - which there isn’t! Can anyone see what I’ve done wrong? I’ve gone over and over and over it and cannot figure it out. TIA!
The CSS for the grid portion is simple:
.container-exec2 {
display: grid;
grid-gap: 20px;
grid-template: repeat(6, 100px) / 100px 350px 100px 350px;
}
The html is:
<!doctype html>
Borzoi Club of America, Inc<meta name="description" content="The national club for the Borzoi breed in the United States">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i|Open+Sans:300,300i,400" rel="stylesheet">
<link href="CSS/BCOA-main.css" rel="stylesheet" type="text/css">
<link href="CSS/BCOA-sub-grid3.css" rel="stylesheet" type="text/css">
<div class="ceheader"><h1>Officers of the Borzoi Club of America, Inc.</h1></div>
<div class="container-exec2">
<div><img src="photos/placeholder.jpg"></div>
<div><h4>President</h4>
<p>Name<br>Street <br>City<br>Phone<br>
<a href="mailto:name@mail.com">name@mail.com</a></p></div>
<div><img src="photos/placeholder.jpg"></div>
<div><h4>Region 1 Governor</h4>
<p>Name<br>Street, City<br>Phone<br>
<a href="mailto:name@murrayjmiller.com">name@murrayjmiller.com</a><br>(CT, ME, MA, NH, NJ, NY, PA, RI, VT)</p></div>
<div><img src="photos/placeholder.jpg"></div>
<div><h4>Past President</h4>
<p>Name<br>Street, <br>City<br>Phone<br>
<a href="mailto:name@comcast.net">name@comcast.net</a></p></div>
<div><img src="photos/placeholder.jpg"></div>
<div><h4>Region 2 Governor </h4>
<p>Name<br>Street, City<br>Phone<br>
<a href="mailto:name@bellsouth.net">name@bellsouth.net</a><br>(AL, DE, DC, FL, GA, MD, KY, NC, SC, TN, VA, WV)</p><div>
<div><img src="photos/placeholder.jpg"></div>
<div><h4>Vice-President</h4>
<p>Name<br>Street, <br>City<br>Phone<br>
<a href="mailto:name@gmail.com">name@gmail.com</a></p></div>
<div><img src="photos/placeholder.jpg"></div>
<div><h4>Region 3 Governor</h4>
<p>Name<br>Street, City<br>Phone<br>
<a href="mailto:name@att.net">name@att.net</a><br>(AR, CO, KS, LA, MS, MO, OK, TX)</p></div>
<div><img src="photos/placeholder.jpg"></div>
<div><h4>Treasurer</h4>
<p>Name<br>Street, <br>City<br>Phone<br>
<a href="mailto:name@bcoa.club">name@bcoa.club</a><br>
<a href="mailto:name@wavecable.com">name@wavecable.com</a></p></div>
<div><img src="photos/placeholder.jpg"></div>
<div><h4>Region 4 Governor</h4>
<p>Name<br>Street, City<br>Phone<br>
<a href="mailto:name@sbcglobal.net">name@sbcglobal.net</a><br>(AZ, CA, HI, NV, NM, UT)</p></div>
<div><img src="photos/placeholder.jpg"></div>
<div><h4>Recording Secretary</h4>
<p>Name<br>Street, <br>City<br>Phone<br>
<a href="mailto:name@bcoa.club">name@bcoa.club</a></p></div>
<div><img src="photos/placeholder.jpg"></div>
<div><h4>Region 5 Governor</h4>
<p>Name<br>Street, City<br>Phone<br>
<a href="mailto:name@tribcsp.com">name@tribcsp.com </a> <br>(AK, ID, MT, OR, WA, WY)</p></div>
<div><img src="photos/placeholder.jpg"></div>
<div><h4>Corresponding Secretary</h4>
<p>Name<br>Street, <br>City<br>Phone<br>
<a href="mailto:name@zencor.com">name@zencor.com</a></p></div>
<div><img src="photos/placeholder.jpg"></div>
<div><h4>Region 6 Governor</h4>
<p>Name<br>Street, City<br>Phone<br>
<a href="mailto:name@roadrunner.com">name@roadrunner.com</a><br>(IL, IN, IA, MI, MN, NE, ND, OH, SD, WI)</p></div>
<div><img src="photos/placeholder.jpg"></div>
<div><h4>AKC Delegate</h4>
<p>Name<br>Street, <br>City<br>Phone<br>
<a href="mailto:name@comcast.net">name@comcast.net</a></p></div>
</div><!-- container-exec2 -->
<div class="cecontentmap"><p><img src="images/regionmap.gif" alt="BCOA regions map" width="399" height="231" /></p></div>
<?php include("_includes/footer-about.php");?>
<?php include("_includes/footer-bcoa.php");?>