HTML / CSS боковая панель и вид плитки

Question

Я хотел бы реструктурировать страницу на моем сайте angularJS. В настоящее время данные отображаются в виде таблицы; Я хотел бы создать левую боковую панель со списком (плиткой) имен. При нажатии на имя на правой боковой панели должны отображаться дополнительные сведения о выбранном человеке. Будем весьма благодарны за любые рекомендации по эффективному выполнению этой задачи с использованием HTML и CSS.

Вот простой код, который у меня есть:

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;
}

<div class="wrapper">
  <div class="header">Header</div>

  <div class="lft_sidebar">Neme 1</div>
  <div class="lft_sidebar">Name 2</div>
  <div class="lft_sidebar">Name 3</div>
  <div class="lft_sidebar">Name 4</div>

  <div class="rght_sidebar"> More details about Selected Name</div>
</div>

Answer 1

Можно использовать свойства CSS grid-column-start и grid-column-end, чтобы указать, где должна начинаться / заканчиваться ячейка сетки.

body {
margin: 40px;
}

.lft_sidebar {
    grid-area: sidebar;
}

.left {
   grid-column-start: 1;
   grid-column-end: 2;
}

.rght_sidebar {
   grid-column-start: 2;
   grid-column-end: 4;
}

.header {
   grid-column-start: 1;
   grid-column-end: 4;
}

.wrapper {
    display: grid;
grid-gap: 10px;
    grid-template-columns: repeat(3, 1fr);
   
    background-color: #fff;
    color: #444;
}


.box {
 background-color: #444;
 color: #fff;
 border-radius: 5px;
 padding: 10px;
 font-size: 150%;
}

.header,
.footer {
background-color: #999;
}

<div class="wrapper">
<div class="header">Header</div>


<div class="left">
  <div class="lft_sidebar">Neme 1</div>
  <div class="lft_sidebar">Name 2</div>
  <div class="lft_sidebar">Name 3</div>
  <div class="lft_sidebar">Name 4</div>
</div>

<div class="rght_sidebar"> More details about Selected Name</div>


</div>