title: Basic CSS - Following a DRY principal, how would I remove display:grid from my selectors?
body: <p>I am only beginning CSS and HTML so this is definitely a beginner question here. Below is a snippet of my current work:</p>
  <pre><code>/* Setup */
  * {
      box-sizing: border-box; /* Makes like box model work like I'd expect */
  }
  body {
      font-family: 'Roboto', sans-serif;
  }
  /* Necessary Selectors */
  #header {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: auto;
  
      align-items: end;
  }
  .logo {
      font-family: 'Rampart One', cursive;
      font-size: x-large;
  }
  #header-img {
      height: 25px;
  }
  #nav-bar {
      display: grid;
      grid-template-columns: auto auto auto;
      column-gap: 25px;
  }
  
  /* Media Query to change display based on screen width */
  @media (max-width: 500px){
      #nav-bar {
          display: grid;
          grid-template-columns: auto;
          grid-template-rows: repeat(auto-fill, auto);
  
          justify-items: center;
      }
      #header {
          display: grid;
          grid-template-columns: auto;
          grid-template-rows: repeat(auto-fill, auto);
  
          justify-content: center;
          align-items: center;
      }
  } 
  </code></pre>
  <p>The issue I am having is that in almost every ID Selector, I have to add <code>display: grid</code>. I am using <code>grid</code> as my main display, so I would like to not retype this. I've tried putting it in <code>*</code> and <code>body</code> selector, but this doesn't work as I expected. <code>*</code> breaks the webpage, and my selectors don't appear to inherit the display from <code>body</code>. Is there a better way?</p>