I am trying to place my h2 header at the top of a nested grid. I am able to get the nested grid in the layout I want. However, The nested grid has replaced the position of the h2 header, putting it on the bottom instead of the top. I can fix this by adding another row to the nested grid and making the header span the first row. Doing that alters the align the hear has with headers in other sections of the main grid.
body {
font-family: 'Raleway', Verdana, Arial, sans-serif;
line-height: 1.5;
font-size: 16;
display: grid;
grid-template-areas:
"header"
"main"
"footer";
}
header {
grid-area: header;
text-align: center;
}
main {
grid-area: main;
display: grid;
grid-template-areas:
"intro geo"
"gov gov";
grid-template-columns: 1fr 1fr;
grid-gap: 5px;
}
footer {
grid-area: footer;
}
tr:nth-child(odd) {
background-color: #d9d9d9;
}
td {
text-align: center;
}
section {
background-color: #ddd;
}
article {
background-color: #eee;
}
#Geo {
grid-area: geo;
display: grid;
grid-template-areas:
"loc coord"
"loc metr";
grid-template-columns: 1fr 1fr;
padding: 10px;
grid-gap: 10px;
}
#Geo > h2 {
}
#Loc {
grid-area: loc;
/* grid-row: 1 / span 2; */
}
#GeoLoc {
grid-area: coord;
/* grid-column: 2;
grid-row: 1; */
}
#GeoMet {
grid-area: metr;
/* grid-column: 2;
grid-row: 2; */
}
#Gov {
grid-area: gov;
} <section id="Geo">
<h2>Geography</h2>
<article id="Loc">
<h3>Location</h3>
<img src="/images/spain-locator-map.png" alt="Spain Relative Location Map">
<p>The location of Spain is Southwestern Europe, bordering the Mediterranean Sea, North Atlantic Ocean, Bay of Biscay, and Pyrenees Mountains; southwest of France</p>
<p>More images of Spain and it's geography can be found on the <a href="https://www.cia.gov/the-world-factbook/countries/spain/images">CIA World Factbook.</a></p>
</article>
<article id="GeoLoc">
<h3>Geographic Coordinates</h3>
<p>The geographic coordinates of Spain are 40 00 N, 4 00 W</p>
</article>
<article id="GeoMet">
<h3>Geographic Metrics</h3>
<h4>Area</h4>
<p>The area of Spain is:</p>
<table>
<tr>
<th>Type of Area</th>
<th>Area (in sq km)</th>
</tr>
<tr>
<td>Land</td>
<td>498,980</td>
</tr>
<tr>
<td>Water</td>
<td>6,390</td>
</tr>
<tr>
<td>Total</td>
<td>505,370</td>
</tr>
</table>
</article>
</section>EDIT: I made a codepen.io page for the css in question. It is the Geography section on the right