Comment aligner les images en utilisant la grille CSS ?

Question

J'essaie de créer une partie d'un site Web en utilisant CSS Grid. J'essaie de faire en sorte que la liste et l'image restent sur la même ligne et diminuent/agrandissent lorsque la taille de l'écran change. Le code est collé ci-dessous. Toute aide est grandement appréciée.

Je me demande si l'erreur se trouve dans mon modèle de grille.

.pm {
  display: inline-grid;
  max-width: 100%;
  position: relative;
  margin: auto;
  grid-template-areas: "title title" "list picture" "options options" "paragraph paragraph";
  grid-template-rows: 10% 1fr 20% 10%;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.pm h2 {
  grid-area: title;
  text-align: center;
}

.pm .container ul {
  grid-area: list;
}

.pm .container img {
  grid-area: picture;
  max-width: 30%;
  border-radius: 0.25em;
}

.pm .options {
  grid-area: options;
}

.pm .paragraph {
  grid-area: paragraph;
}

<div class="pm section">
  <h2>Preventative Maintenance:</h2>
  
  <div class="container">
    <ul>
      <li>Calibration of each piece of equipment as required.</li>
      <li>Inspect any switches, controls and/or electrical components.</li>
      <li>Inspect motor brushes and clean the motor fan vents.</li>
      <li>Inspect and tighten hardware.</li>
      <li>Inspect all belts cables and chains.</li>
      <li>Lube all moving components as required.</li>
    </ul>
    <img src="./style/images/circuit.avif">
  </div>
  
  <div class="options">
    <h3>Options:</h3>
    
    <ul>
      <li>Monthly</li>
      <li>Quarterly</li>
      <li>Semi-annual</li>
      <li>Annual</li>
    </ul>
  </div>
  
  <div class="paragraph">
    <p>Any findings will be reported in the invoice, with an option to have any findings quoted for repair, separately.</p>
    
    <p>Any parts needed, per the repair quote, would be ordered and all repairs would be scheduled following arrival of the parts.</p>
  </div>
</div>

Answer 1

L'image n'est pas dans la section images car elle est imbriquée à l'intérieur du conteneur et la balise img elle-même n'est pas un élément de grille.

Ci-dessous le code de travail

.pm {
  display: inline-grid;
  max-width: 100%;
  position: relative;
  margin: auto;
  grid-template-areas: "title title" "list picture" "options options" "paragraph paragraph";
  grid-template-rows: 10% 1fr 20% 10%;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.pm h2 {
  grid-area: title;
  text-align: center;
}

.pm .container ul {
  grid-area: list;
}

.pm .img-container {
  grid-area: picture;
  max-width: 30%;
  border-radius: 0.25em;
}

.pm .options {
  grid-area: options;
}

.pm .paragraph {
  grid-area: paragraph;
}

  
Preventative Maintenance:
  
  

    

      
Calibration of each piece of equipment as required.
      
Inspect any switches, controls and/or electrical components.
      
Inspect motor brushes and clean the motor fan vents.
      
Inspect and tighten hardware.
      
Inspect all belts cables and chains.
      
Lube all moving components as required.
    
    
  
  
  

    
  

  

    
Options:
    
    

      
Monthly
      
Quarterly
      
Semi-annual
      
Annual
    
  
  
  

    
Any findings will be reported in the invoice, with an option to have any findings quoted for repair, separately.
    
    
Any parts needed, per the repair quote, would be ordered and all repairs would be scheduled following arrival of the parts.