两列布局，右列有 3 行

Question

我正在学习 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 行？

Answer 1

您需要将区域分配给类：

.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>