Nari Sample

by Alex Cowan

HTML

<div class="grid-container">
  <div id="search-controls" class='grid-item'>
    <div id="result-sort">Sort By <select>
        <option value="new to old">new to old</option>
        <option value="old to new">old to new</option>
      </select>
    </div>
    <div id="filter-question"> Search By
      <select id="Answer">
        <option value="All">Answer</option>
        <option value="Answered">Answered</option>
        <option value="Unanswered">Unanswered</option>
      </select>
      <select id="Episode">
        <option value="All">Episode</option>
        <option value="Episode 1">Episode 1</option>
        <option value="Episode 2">Episode 2</option>
        <option value="Episode 3">Episode 3</option>
        <option value="Episode 4">Episode 4</option>
        <option value="Episode 5">Episode 5</option>
        <option value="Episode 6">Episode 6</option>
        <option value="Episode 7">Episode 7</option>
        <option value="Episode 8">Episode 8</option>
      </select>
    </div>
    <button type="submit" id='go-btn'>Go</button>
  </div>
  <div class="grid-item">Section 1</div>
  <div class="grid-item">Section 2</div>
  <div class="grid-item">Section 3</div>
  <div class="grid-item">Section 4</div>
  <div class="grid-item">Section 5</div>




</div>

CSS

.grid-container {
    display: grid;
    grid-template-columns: 1fr; /* Single column layout */
    gap: 10px;
    padding: 10px;
}

.grid-item {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    padding: 20px;
    text-align: center;
}

/* make all div's within the dev search-control inline */
#search-controls div {
  display: inline;
}