двухколонный макет с правым столбцом, имеющим 3 строки - PullRequest
Новая
       9

двухколонный макет с правым столбцом, имеющим 3 строки

0 голосов
/ 07 апреля 2020

Я изучаю css сеток, но я нахожу области шаблонов сетки, столбцы и строки очень трудными для понимания. Я попытался разработать макет экрана чата, где будет две колонки. В левом столбце будет список разговоров, а в правом столбце будет три строки. Один как заголовок чата, который будет исправлен, а другой ряд будет для списка сообщений, а третий ряд будет формой для отправки сообщения, которое также будет исправлено. Я пытался сделать следующим образом, но он не работает, как ожидалось 

.chat-container {
  display: grid;
  grid-template-areas: "chat-list chat-title chat-title" "chat-list message-list message-list" "chat-list chat-form chat-form";
  grid-template-columns: 200px 1fr;
  border-radius: 10px;
  height: 95vh;
  width: 100%;
}

.chat-title {
  padding: 10px;
  background: blue;
}

.chat-list {
  padding: 10px;
  background: red;
}

.message-list {
  padding: 10px;
  background: green;
}

.chat-form {
  padding: 10px;
  background: yellow;
}
<div class="chat-container">
  <section class="chat-list">
    Chat List
  </section>
  <section class="chat-title">Chat title</section>
  <section class="message-list">
    Message List
  </section>
  <section class="chat-form">Chat form</section>
</div>

Я упомянул список чата три раза для каждой строки, но я не вижу блока списка чата с формой чата. Как я могу расположить 2 столбца с правым столбцом, имеющим 3 строки?

1 Ответ

3 голосов
/ 07 апреля 2020

Вам необходимо присвоить области классам: 

.chat-container {
  display: grid;
  grid-template-areas: "chat-list chat-title chat-title" "chat-list message-list message-list" "chat-list chat-form chat-form";
  grid-template-columns: 200px 1fr;
  border-radius: 10px;
  height: 95vh;
  width: 100%;
}

.chat-title {
  padding: 10px;
  background: blue;
  grid-area: chat-title;   /*  added */
}

.chat-list {
  padding: 10px;
  background: red;
  grid-area: chat-list;   /*  added */
}

.message-list {
  padding: 10px;
  background: green;
  grid-area: message-list;   /*  added */
}

.chat-form {
  padding: 10px;
  background: yellow;
  grid-area: chat-form;   /*  added */
}
<div class="chat-container">
  <section class="chat-list">
    Chat List
  </section>
  <section class="chat-title">Chat title</section>
  <section class="message-list">
    Message List
  </section>
  <section class="chat-form">Chat form</section>
</div>
...