Align contents to the top of the row with CSS grid

August 1, 2024

I’m laying out a 3×2 grid with an image, title and text in each cell. In cases where the text is shorter than others in the same row, it creates a white space at the top and the content moves down.

I would like to keep the top of the image thumbnails aligned and let the longer text push down instead, but tinkering with margins and padding doesn’t seem to be working. What is causing this to happen?

        .kb-feature-table-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            align-items: center;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .kb-feature-table-grid img {
            width: 100%;
            height: auto;
            border-radius: 10px;
        }

        @media (max-width: 600px) {
            .kb-feature-table-grid {
                grid-template-columns: 1fr;
                text-align: center;
            }
        }

    <div class="kb-feature-table-grid">

        <div>
            <div><img src="https://www.sovol3d.com/cdn/shop/files/Sovol_SV06_0ed3761d-395b-4beb-9c23-ffc42107bde8_407x_crop_center.jpg?v=1702378595" alt="Sample Image"></div>
            <div>
                <h2>220*220*250mm</h2>
                <p>220*220*250mm print size, enough for daily use and household use.</p>
            </div>
        </div>
    
        <div>
            <div><img src="https://www.sovol3d.com/cdn/shop/files/Sovol_SV06_Best_Budget_3D_Printer_Sovol_3D_Printer_9_407x_crop_center.jpg?v=1697454898" alt="Sample Image"></div>
            <div>
                <h2>Resume Printing</h2>
                <p>The resume printing function can make the printer continue printing perfectly after a power outage.</p>
            </div>
        </div>
        
        <div>
            <div><img src="https://www.sovol3d.com/cdn/shop/files/SV06-08_8224235d-1ef5-43e4-a415-acf133eaaa09_407x_crop_center.jpg?v=1715857902" alt="Sample Image"></div>
            <div>
                <h2>Dual Z axis</h2>
                <p>Dual Z-axis screws and stepper motors improve the accuracy and precision of the nozzle’s vertical movement with a specified Z-axis accuracy of 0.001mm.</p>
            </div>
        </div>
        
    </div>

>Solution :

Remove align-items:center.

.kb-feature-table-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  /*  align-items: center; */
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.kb-feature-table-grid img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

@media (max-width: 600px) {
  .kb-feature-table-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

<div class="kb-feature-table-grid">

  <div>
    <div><img src="https://www.sovol3d.com/cdn/shop/files/Sovol_SV06_0ed3761d-395b-4beb-9c23-ffc42107bde8_407x_crop_center.jpg?v=1702378595" alt="Sample Image"></div>
    <div>
      <h2>220*220*250mm</h2>
      <p>220*220*250mm print size, enough for daily use and household use.</p>
    </div>
  </div>

  <div>
    <div><img src="https://www.sovol3d.com/cdn/shop/files/Sovol_SV06_Best_Budget_3D_Printer_Sovol_3D_Printer_9_407x_crop_center.jpg?v=1697454898" alt="Sample Image"></div>
    <div>
      <h2>Resume Printing</h2>
      <p>The resume printing function can make the printer continue printing perfectly after a power outage.</p>
    </div>
  </div>

  <div>
    <div><img src="https://www.sovol3d.com/cdn/shop/files/SV06-08_8224235d-1ef5-43e4-a415-acf133eaaa09_407x_crop_center.jpg?v=1715857902" alt="Sample Image"></div>
    <div>
      <h2>Dual Z axis</h2>
      <p>Dual Z-axis screws and stepper motors improve the accuracy and precision of the nozzle’s vertical movement with a specified Z-axis accuracy of 0.001mm.</p>
    </div>
  </div>

</div>