6 divを2x3垂直グリッドに配置するのに問題がある

Question

私は今、HTMLとCSSを1週間学習しており、オンラインコースを開始しました。最初の部分の終わりに、私は応答性の高いポートフォリオページを作成する必要があります。私はあなたが言うことができるようにまだプロジェクトはありませんので、私が持っていると想像することに決めました。私が作成したdivの単純なグリッドを作成するために一日中苦労しています。私はそれが3列の2列になるようにしておき、おそらく各要素の間隔を置いておきます。 しかし、私がこれまでに得た最も近いものは、それらの6つの要素を互いに下に置くことです。だから助けてくれますか？ここで

はフィドルです：https://jsfiddle.net/5tyjbLa4/1/

は、事前にありがとう、私のコーディングスタイルが恐ろしいであれば、私はので、私は改善することができお知らせください。私が言及したように、私は一週間前に仕事の後でコードを開始した。

.responsive { 
 
    font-family: inherit serif; 
 
    width: 1000px; 
 
    height: 1400px; 
 
    position: relative; 
 
    top: 200px; 
 
    margin: auto; 
 
    text-align: center; 
 
    background-color: red; 
 
    
 
} 
 

 
.responsive li { 
 
    list-style: none; 
 
    margin: 0 auto; 
 
    width: 500px; 
 
    height: 420px; 
 
    text-align: center; 
 
    border: 1px solid coral; 
 
    border-radius: 50px; 
 
} 
 

 
.responsive li img { 
 
    border-radius: 50px; 
 
} 
 

 
.responsive h2 { 
 
    font-size: 40px; 
 
    font-weight: 600; 
 
    padding-bottom: 40px; 
 
} 
 

 
.grid-container h3 { 
 
    font-size: 30px; 
 
    font-weight: 800; 
 
} 
 
.grid-container p { 
 
    font-family: monospace; 
 
    font-size: 15px;

<section class="responsive"> 
 
    <h2> My work so far/ My Portfolio</h2> 
 
    <ul class="grid-container"> 
 
     <li class="img1"><img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/jack-russel-terrier-dog-breed-pictures/2-face.jpg" width="400px" style="margin-top: 20px" "border-radius: 30%"> 
 
      <h3>This is a photo of Jack Russell</h3> 
 
      <p>I do not have portfolio projects yet but I do have a Jack Russell Terrier who I love so I decided to post photo of a JRT.</p> 
 
     </li> 
 
     <li class="img2"><img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/jack-russel-terrier-dog-breed-pictures/2-face.jpg" width="400px" style="margin-top: 20px" "border-radius: 30%"> 
 
      <h3>This is a photo of Jack Russell</h3> 
 
      <p>I do not have portfolio projects yet but I do have a Jack Russell Terrier who I love so I decided to post photo of a JRT.</p> 
 
     </li> 
 
     <li class="img3"><img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/jack-russel-terrier-dog-breed-pictures/2-face.jpg" width="400px" style="margin-top: 20px" "border-radius: 30%"> 
 
      <h3>This is a photo of Jack Russell</h3> 
 
      <p>I do not have portfolio projects yet but I do have a Jack Russell Terrier who I love so I decided to post photo of a JRT.</p> 
 
     </li> 
 
     <li class="img4"><img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/jack-russel-terrier-dog-breed-pictures/2-face.jpg" width="400px" style="margin-top: 20px" "border-radius: 30%"> 
 
      <h3>This is a photo of Jack Russell</h3> 
 
      <p>I do not have portfolio projects yet but I do have a Jack Russell Terrier who I love so I decided to post photo of a JRT.</p> 
 
     </li> 
 
     <li class="img5"><img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/jack-russel-terrier-dog-breed-pictures/2-face.jpg" width="400px" style="margin-top: 20px" "border-radius: 30%"> 
 
      <h3>This is a photo of Jack Russell</h3> 
 
      <p>I do not have portfolio projects yet but I do have a Jack Russell Terrier who I love so I decided to post photo of a JRT.</p> 
 
     </li> 
 
     <li class="img6"><img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/jack-russel-terrier-dog-breed-pictures/2-face.jpg" width="400px" style="margin-top: 20px" "border-radius: 30%"> 
 
      <h3>This is a photo of Jack Russell</h3> 
 
      <p>I do not have portfolio projects yet but I do have a Jack Russell Terrier who I love so I decided to post photo of a JRT.</p> 
 
     </li> 
 
    </ul> 
 
</section>

Answer 1

簡単なフロート選択肢は次のとおりです。

.grid-container > li { 
    float: left; 
    width: 50%; 
    display: inline-block; 
    box-sizing: border-box; 
} 

しかし、クリーンな代替フレックス使用している：https://www.w3schools.com/cssref/css3_pr_flex.asp

Answer 2

こんにちはplsは、このよう

.responsive { height: auto; } 

を変更

Answer 3

あなたは、単純なグリッドのフレキシボックスを使用することができます。美しく働いたこと

.grid-container{ 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-around; 
    padding-left: 0; 
    width: 100%; 
} 

.grid-container li{ 
    margin-bottom: 15px; 
    width: 40%; 
}