I'm new to coding and trying to get into using grids in my css as they seem super useful. My textbook and all the guides I find tend to show the css but not associated html.
Anyway when I put tags into and area element like , the tags inside of them will not display in the correct columns and rows, but if I take those tags out of those elements they will work in the grid. Using the inspect tool tells me to turn the parent element to display: grid, but that doesen't work. My textbook says you can use <div>, <article> etc etc on a 12 column grid but for the life of me I can't figure it out.
I've tried putting display: grid into every element... I've tried using the inspect tool to try to learn why they are getting the display: block property, but all I get is its coming from "user agent stylesheet", Ive tried on Chrome and Firefox.
/* custom property */
:root {
--global-color-1: #21aab4;
background-color: white;
}
* {
margin: 0;
padding: 0;
}
/* the styles for the elements */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
border: 3px solid black;
margin: 0;
display: grid;
grid-template-rows: 150px auto auto 150px;
grid-template-columns: repeat(12, 8.3vw);
}
img {
max-width: 100%;
overflow: hidden;
}
#logo{
display: grid;
grid-row: 1 /2; grid-column: 1 / 5;
max-width: 100%;
}
#name{
max-width: 100%;
padding-top: 2rem;
grid-row: 1 /2; grid-column: 1 / 5;
}
#header {
grid-row: 1 / 2; grid-column: 1 / 13;
background-color: white;
border-bottom: 2px solid black;
}
#nav {
display: flex;
justify-content: space-between;
list-style-type: none;
grid-column: 5 / 12;
padding-top: 2.5rem;
border-bottom: 2px solid black;
}
main {
grid-row: 2 / 4; grid-column: 1 / 13;
display: grid;
}
#thoughtful {
display: flex;
grid-row: 2 / 4;
grid-column: 1 / 5;
}
#s2 {
grid-row: 2 / 4; grid-column: 7 / 13;
width: 40vw;
}
#s2 h1{
font-size: 3.2vw;
}
#s2 li{
font-size: 2vw;
}
footer {
grid-row: 4 / 5; grid-column: 1 / 12;
text-align: center;
padding-top: 5vh;
font-family: serif;
}
a:focus, a:hover {
font-style: italic;
}
.current {
color: rgb(20, 111, 4);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sage Raymond </title>
<link rel="shortcut icon" href="images/Bear-favicon.jpg">
<link rel="stylesheet" href="styles/main_gridexp.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="logo"><a href="index.html"><img src="images/name.gif" alt="Sage Raymond Homepage" id="name"></a></div>
<ul id="nav">
<li> </li>
<li class="current"><a href="index.html"><h2>Home</h2></a></li>
<li><a href="education.html"><h2 class="current">C.V.</h2></a></li>
<li><a href="publications.html"><h2>Papers</h2></a></li>
<li><a href="media.html"><h2>Media</h2></a></li>
</ul>
<img src="images/thoughtful_sage.jpeg" id="thoughtful">
<ul id="s2">
<h1>Degrees</h1>
<li>Master of Science in Ecology, University of Alberta, January 2021 to present</li>
<li>Bachelor of Science in Biology, Thompson Rivers University, December 2020</li>
<li>Diploma in Recreation, Fish, and Wildlife, Selkirk College, April 2017</li>
</ul>
<footer>
<p>© 2022, Sage Raymond, Port Townsend, WA, USA 98368</p>
</footer>
</body>
</html>