两列布局，右列有 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 {&nbsp; display: grid;&nbsp; grid-template-areas: "chat-list chat-title chat-title" "chat-list message-list message-list" "chat-list chat-form chat-form";&nbsp; grid-template-columns: 200px 1fr;&nbsp; border-radius: 10px;&nbsp; height: 95vh;&nbsp; width: 100%;}.chat-title {&nbsp; padding: 10px;&nbsp; background: blue;&nbsp; grid-area: chat-title;&nbsp; &nbsp;/*&nbsp; added */}.chat-list {&nbsp; padding: 10px;&nbsp; background: red;&nbsp; grid-area: chat-list;&nbsp; &nbsp;/*&nbsp; added */}.message-list {&nbsp; padding: 10px;&nbsp; background: green;&nbsp; grid-area: message-list;&nbsp; &nbsp;/*&nbsp; added */}.chat-form {&nbsp; padding: 10px;&nbsp; background: yellow;&nbsp; grid-area: chat-form;&nbsp; &nbsp;/*&nbsp; added */}<div class="chat-container">&nbsp; <section class="chat-list">&nbsp; &nbsp; Chat List&nbsp; </section>&nbsp; <section class="chat-title">Chat title</section>&nbsp; <section class="message-list">&nbsp; &nbsp; Message List&nbsp; </section>&nbsp; <section class="chat-form">Chat form</section></div>