HTML/CSSグリッドレイアウトのテキストエレメントの位置

Question

私は作業しているコードペンを持っていますが、カントは正しく配置されていないようです。 ここからわかるように、著者は同じグリッドセルの側面に配置されます。 https://codepen.io/AngelCasas/pen/qXdGbd?editors=1100 HTML5：

<blockquote class="phrase"> 
     <p style="font-size: 3vh">"The monotony and solitude of a quiet life<br> stimulates the creative mind"</p> 
     <p>- Albert Einstein -</p> 
    </blockquote><!-- End of quote --> 

はCSS：

.phrase { 
     grid-area: phrase; 
     display: flex; 
     justify-content: center; 
     text-align: center; 
     font-family: Cardo, serif, Arial; 
     font-size: 1.5vh; 
     color: #00264d; 
     } 

私は、テキストではなく横向きの流下さ得ることができる方法はありますか？ 事前にアドバイスをありがとうございます！

Answer 1

display: flex;をcssから削除し、次の<p>を前のものの下に置きます。

Answer 2

は「フレックス方向」プロパティを追加し、列に設定します。codepenを見て

.phrase { 
     grid-area: phrase; 
     display: flex; 
     justify-content: center; 
     text-align: center; 
     font-family: Cardo, serif, Arial; 
     font-size: 1.5vh; 
     color: #00264d; 
     flex-direction: column; 
}