我已经学习了HTML和CSS一周，我开始了在线课程。在第一部分的末尾，我必须创建一个响应式投资组合页面。我还没有任何项目，所以我决定想象自己有，并且整天都在努力创建我创建的Divs的简单网格。我希望它是2行相邻的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>您可以将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%;
}
一个简单的浮点替代品是：
.grid-container > li {
float: left;
width: 50%;
display: inline-block;
box-sizing: border-box;
}
但是一种清洁替代方案是使用flex：https：//www.w3schools.com/cssref/csss3_pr_flex.asp
hi pls这样更改，
.responsive { height: auto; }