那我們就接著完成CSS的部分吧~

.other-message{
    justify-items: start;
}
.other-message .message-content{
    grid-template-columns: 48px 1fr;
    grid-column-gap: 15px;
}

justify-items前面有介紹過，
start就是向聊天室左邊靠齊。

• grid-template-columns
  這個可能講解上有點複雜，
  我自己其實也不太懂其中的意思，
  會使用的原因是我們能看到對話的內容是在頭貼的下方，
  而我想要讓他呈現在頭貼的右方，
  而這屬性是通過指定的大小來定義對話的列，
  我從網路上抓了一張圖，
  從圖上就能比較清楚如何設置位置。

而grid-column-gap就是設置元素之間的間隙大小，
因為要加對話框所以要讓對話跟頭貼保持一些距離。

那我們就能看到對話已經從下方移置到頭貼右方，
那我們今天先到這部分~
明天應該就能把聊天對話的部分解決完。