title: HTML/CSS sidebar and tile view
body: <p>I would like to restructure a page on my angularJS website. Currently data is being displayed in a table view; I would like to create a left sidebar with a (tile) list of names. When a name is clicked on, the right sidebar should display additional details about the selected individual. Any guidance on how to efficiently accomplish this using HTML and CSS will be much appreciated.</p>
  
  <p>Here is the simple code I have so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 40px;
  }
  
  .lft_sidebar {
    grid-area: sidebar;
  }
  
  .content {
    grid-area: content;
  }
  
  .header {
    grid-area: header;
  }
  
  .wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 120px 120px 120px;
    grid-template-areas: "....... header header" "sidebar content content" "footer  footer  footer";
    background-color: #fff;
    color: #444;
  }
  
  .box {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 10px;
    font-size: 150%;
  }
  
  .header,
  .footer {
    background-color: #999;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="header"&gt;Header&lt;/div&gt;
  
    &lt;div class="lft_sidebar"&gt;Neme 1&lt;/div&gt;
    &lt;div class="lft_sidebar"&gt;Name 2&lt;/div&gt;
    &lt;div class="lft_sidebar"&gt;Name 3&lt;/div&gt;
    &lt;div class="lft_sidebar"&gt;Name 4&lt;/div&gt;
  
    &lt;div class="rght_sidebar"&gt; More details about Selected Name&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>