J'ai du mal à placer 6 divs sous la forme d'une grille verticale de 2x3

Question

J'ai appris le HTML et le CSS depuis une semaine et j'ai commencé un cours en ligne. À la fin de la première partie, je dois créer une page de portefeuille réactive. Je n'ai pas encore de projets comme vous pouvez le dire, j'ai donc décidé d'imaginer que j'ai et je me bats toute la journée pour créer une grille simple des divs que j'ai créés. Je veux qu'il y ait 2 colonnes de 3 rangées l'une à côté de l'autre, probablement avec un espacement entre chaque élément. Cependant, le plus proche que j'ai obtenu jusqu'ici est d'avoir ces 6 éléments l'un en dessous de l'autre. Alors pouvez-vous aider, s'il vous plaît?

Voici un Fiddle: https://jsfiddle.net/5tyjbLa4/1/

Nous vous remercions à l'avance et si mon style de codage est horrible, s'il vous plaît laissez-moi savoir que je peux améliorer. Comme je l'ai mentionné, j'ai commencé il y a seulement une semaine à coder après le travail.

.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

Une alternative simple flotteur est:

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

Mais une alternative plus propre est d'utiliser Flex: https://www.w3schools.com/cssref/css3_pr_flex.asp

Answer 2

Salut pls changer comme ça,

.responsive { height: auto; } 

Answer 3

Vous pouvez utiliser FlexBox pour une grille simple:

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

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