Integrating CSS Grid (HinH Prototype 3)

This supports a software dev. class for businesspeople that you can find here: https://www.alexandercowan.com/making-html-manageable And a case you can find here: https://www.alexandercowan.com/making-html-manageable

by sk8wt

HTML

<div class="container">

  <div id="nav-bar">
    Home | Parts | Search
  </div>
  
    <div id="sort-results">
    <div id="search-select">
      SEARCH
      <input type="text" name="parts-search" placeholder="Acme Coolerator Sniggler" size=30>
      <br>
      <select>
      <option value="None">Manufacturer</option>
      <option value="Acme">Acme</option>
      <option value="Bacme">Bacme</option>
      <option value="Cacme">Cacme</option>
      <option value="Dacme">Dacme</option>
    </select>
      <select>
      <option value="None">Model</option>
      <option value="Acme">TooCool</option>
      <option value="Bacme">TooHot</option>
      <option value="Cacme">JustRight</option>
      <option value="Dacme">Coolerator</option>
    </select>
      <select>
      <option value="None">Type</option>
      <option value="Acme">Sniggler</option>
      <option value="Bacme">Wiggler</option>
      <option value="Cacme">Jiggler</option>
      <option value="Dacme">Tiggler</option>
    </select>
    </div>
  </div>

  <div id="result-sort">
    Sort By
    <select>
        <option value="None">Popularity</option>
        <option value="Acme">Price</option>
        <option value="Bacme">Manufacturer</option>
      </select>

    <div id="result-count">
      12 Results
    </div>
  </div>



  <div class="catalog">
    <div class="catalog-part1">
      <img src="https://www.alexandercowan.com/wp-content/uploads/2017/12/PCB-board-150px.png" alt="PCB board"></div>
    <div class="catalog-part2">
      <img src="https://www.alexandercowan.com/wp-content/uploads/2017/12/hvac-fan-photo-2-post-150px.png" alt="PCB board"></div>
    <div class="catalog-part3">
      <img src="https://www.alexandercowan.com/wp-content/uploads/2017/12/hvac-board-4-post-150px.png" alt="PCB board 2"></div>
    <div class="catalog-part4">
      <img src="https://www.alexandercowan.com/wp-content/uploads/2017/12/hvac-metal-part-post-150px.png" alt="PCB board"></div>
  </div>
</div>

CSS

#nav-bar {
  text-align: center;
  align-self: center;
  grid-area: nav-bar;
}

#search-select {
  padding: 2px;
  grid-area: search-select;
}

#sort-results {
  padding: 2px;
  grid-area: sort-results;
}

/#result-sort {
  text-align: right;
  grid-area: result-sort;
}

#result-count {
  padding: 5px;
  text-align: center;
}

.container {
  display: grid;
  border-style: solid;
  border-color: #808285;
  border-width: 3px;
  grid-gap: 1px 15px;
  grid-template-areas: 
  'nav-bar        nav-bar' 
  'sort-results   result-sort' 
  'search-select  search-select' 
  'catalog        catalog';
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(2, 3fr);
  position: relative;
  margin: auto;
}

img {
  width: 100%;
  height: auto;
}

.catalog {
  display: grid;
  border-style: solid;
  border-color: #808285;
  border-width: 1px;
  grid-area: catalog;
  grid-template-areas: 
  'catalog-part1  catalog-part2' 
  'catalog-part3  catalog-part4';
  justify-items: center;
  align-items: center;
  align-content: center;
}

.catalog-part1 {
  border-style: solid;
  border-color: #808285;
  border-width: 1px;
  margin: 10px;
  grid-area: catalog-part1;
}

.catalog-part2 {
  border-style: solid;
  border-color: #808285;
  border-width: 1px;
  margin: 10px;
  grid-area: catalog-part2;
}

.catalog-part3 {
  border-style: solid;
  border-color: #808285;
  border-width: 1px;
  margin: 10px;
  grid-area: catalog-part3;
}

.catalog-part4 {
  border-style: solid;
  border-color: #808285;
  border-width: 1px;
  margin: 10px;
  grid-area: catalog-part4;
}