如何使用 CSS 網格對齊圖片？

Question

我正在嘗試使用 CSS 網格建立網站的一部分。我試圖讓清單和圖片保持在同一行中，並在螢幕大小改變時按比例縮小/增長。程式碼貼在下面。非常感謝任何幫助。

我想知道錯誤是否出在我的網格模板內。

.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

圖像不在圖片部分中，因為它嵌套在容器內，並且 img 標籤本身不是網格項目。

在工作程式碼下方

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