6 div를 2x3 세로 격자로 배치하는 데 어려움이 있습니다.

Question

저는 1 주일 동안 HTML과 CSS를 익혔으며 온라인 과정을 시작했습니다. 첫 번째 부분의 끝에서 나는 반응 형 포트폴리오 페이지를 만들어야합니다. 나는 당신이 말할 수있는대로 아직 어떤 프로젝트도 가지고 있지 않다는 것을 상상하기로 결심했다. 그리고 내가 만든 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

당신은 간단한 그리드 인 flexbox를 사용할 수 있습니다 아름다운 일이

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

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