Questions/Problems with a Personal Project

html-css
grid

#1

Hello! I am encountering problems with a personal project. I have recently decided to create a website for my JROTC unit, but I have encountered some problems when using the Codecademy project program. Recently, I have completed the CSS: Grid lessons within the CSS section, and I tried to use the tips and tricks I learned in the lessons, but they are not working.

Within the index.html file, I have a div set to class=“grid”, and within the style.css file, I added the display property and set it to grid. The word grid has been grayed out along with any properties I try to use from the lesson including grid-template and grid-area. I am unsure of how to fix it. Whenever I gloss over the x symbol on the style.css stylesheet it says the aforementioned properties are “unknown properties”. I have looked on this forum to see if anyone else has had this problem, but I was unable to see anyone with similar issues. Thank you for taking the time to assist me.

  <div class="grid">
    <header>
      <h1>CA-861 Oak Grove AFJROTC<h1>
      <p>"Ignis Flammae"</p>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">FAQs</a></li>
          <li><a href="#">Meet the Unit</a></li>
          <li><a href="#">Squadrons</a></li>
          <li><a href="#">Cadets' Quarters</a></li>
          <li><a href="#">Unit Calendar</a></li>
        </ul>
      </nav>
    </header>
  </div>
.grid {
    width: 960px;
    border: 1px blue solid;
    display: grid;
    grid-template: repeat(12, 1fr) / repeat(12, 1fr);
}

#2

This is how I interpret the above template declaration…

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Grid</title>
    <link href="grid.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div>
      <header>
        <h1>CA-861 Oak Grove AFJROTC</h1>
        <p>"Ignis Flammae"</p>
        <nav><ul class="grid">
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">FAQs</a></li>
          <li><a href="#">Meet the Unit</a></li>
          <li><a href="#">Squadrons</a></li>
          <li><a href="#">Cadets' Quarters</a></li>
          <li><a href="#">Unit Calendar</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">FAQs</a></li>
          <li><a href="#">Meet the Unit</a></li>
          <li><a href="#">Squadrons</a></li>
          <li><a href="#">Cadets' Quarters</a></li>
          <li><a href="#">Unit Calendar</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">FAQs</a></li>
          <li><a href="#">Meet the Unit</a></li>
          <li><a href="#">Squadrons</a></li>
          <li><a href="#">Cadets' Quarters</a></li>
          <li><a href="#">Unit Calendar</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">FAQs</a></li>
          <li><a href="#">Meet the Unit</a></li>
          <li><a href="#">Squadrons</a></li>
          <li><a href="#">Cadets' Quarters</a></li>
          <li><a href="#">Unit Calendar</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">FAQs</a></li>
          <li><a href="#">Meet the Unit</a></li>
          <li><a href="#">Squadrons</a></li>
          <li><a href="#">Cadets' Quarters</a></li>
          <li><a href="#">Unit Calendar</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">FAQs</a></li>
          <li><a href="#">Meet the Unit</a></li>
          <li><a href="#">Squadrons</a></li>
          <li><a href="#">Cadets' Quarters</a></li>
          <li><a href="#">Unit Calendar</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">FAQs</a></li>
          <li><a href="#">Meet the Unit</a></li>
          <li><a href="#">Squadrons</a></li>
          <li><a href="#">Cadets' Quarters</a></li>
          <li><a href="#">Unit Calendar</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">FAQs</a></li>
          <li><a href="#">Meet the Unit</a></li>
          <li><a href="#">Squadrons</a></li>
          <li><a href="#">Cadets' Quarters</a></li>
          <li><a href="#">Unit Calendar</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">FAQs</a></li>
          <li><a href="#">Meet the Unit</a></li>
          <li><a href="#">Squadrons</a></li>
          <li><a href="#">Cadets' Quarters</a></li>
          <li><a href="#">Unit Calendar</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">FAQs</a></li>
          <li><a href="#">Meet the Unit</a></li>
          <li><a href="#">Squadrons</a></li>
          <li><a href="#">Cadets' Quarters</a></li>
          <li><a href="#">Unit Calendar</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">FAQs</a></li>
          <li><a href="#">Meet the Unit</a></li>
          <li><a href="#">Squadrons</a></li>
          <li><a href="#">Cadets' Quarters</a></li>
          <li><a href="#">Unit Calendar</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">FAQs</a></li>
          <li><a href="#">Meet the Unit</a></li>
          <li><a href="#">Squadrons</a></li>
          <li><a href="#">Cadets' Quarters</a></li>
          <li><a href="#">Unit Calendar</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
        </ul></nav>
      </header>
    </div>
    <script src="grid.js"></script>
  </body>
</html>

grid.css is your style sheet from above. grid.js is an empty file. Set this up in your local environment. I have it in,

%user_path/cc/discuss/%yourusername/

It should look something like this in your browser (image size scaled down 30%)…

afjrotc

Now let’s look at it another way…

grid.css
.grid {
    width: 960px;
    border: 1px blue solid;
    display: grid;
    grid-template: repeat(12, 1fr) / repeat(12, 1fr);
}
.grid-row {
    width: 100%;
    margin: 0 auto;
    border: 1px blue solid;
    display: grid;
    grid-template: 1fr / repeat(12, 1fr);
    box-sizing: border-box;
}

add the following lines to your experiment from above (below the header element)…

index.html
        <nav><ul class="grid-row">
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">FAQs</a></li>
          <li><a href="#">Meet the Unit</a></li>
          <li><a href="#">Squadrons</a></li>
          <li><a href="#">Cadets' Quarters</a></li>
          <li><a href="#">Unit Calendar</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
          <li><a href="#">snafu</a></li>
        </ul></nav>

afjrotc_rev

We can tidy it up a little more with these added selector rules…

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav li {
    text-align: center;
}
nav a {
    text-decoration: none;
}

Boiled it down to this proof-of-concept for a single row with 12 elements…

.grid-row {
    width: 100%;
    margin: 0 auto;    /* if width is less than 100% this is centered */
    border: 1px blue solid;
    display: grid;
    grid-template: 1fr / repeat(12, 1fr);
    box-sizing: border-box;
}
nav ul {
    font-size: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 3em;
}
nav li {
    text-align: center;
    overflow: hidden;
    line-height: 2.8em;
}
nav a {
    font-family: Helvetica, Arial, sans-serif;
    text-decoration: none;
    display: block;
}
nav li:hover,
nav li:focus {
    background: #ccc;
}
nav a:hover,
nav a:focus {
    color: #f00;
}

At the chosen font scale of 100%, your menu needed 1486 pixels to resolve to a single line with no overflow. This should be a telling problem. Short link names on navigation (especially navbars) is essential to UX design. Make the text in the button brief, yet able to speak for itself or at least give off a precocious scent.


P. S.

If I didn’t like ‘grid’ before this, I sure do now. We’ve struggled for years to do what a few simple rules in ‘grid’ can do now.