Bagaimana untuk menyelaraskan imej menggunakan grid CSS?

Question

Saya cuba membina sebahagian daripada tapak web menggunakan Grid CSS. Saya cuba mendapatkan senarai dan imej untuk kekal pada baris yang sama dan mengecilkan/berkembang apabila saiz skrin berubah. Kod itu ditampal di bawah. Sebarang bantuan amatlah dihargai.

Saya tertanya-tanya jika ralat berada dalam templat grid saya.

.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

Imej tiada dalam bahagian gambar kerana ia bersarang di dalam bekas dan tag img itu sendiri bukan item grid.

Di bawah kod kerja

.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.