Html Question posted in
Some basic documentation can be found here.

Html – Align contents to the top of the row with CSS grid

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Try doing this steps:
    I don’t think you need align-items: center from .kb-feature-table-grid.
    Also do this next

    Added display: flex and flex-direction: column to the grid items (.kb-feature-table-grid > div).
    Used align-items: flex-start to align content at the top within each grid cell.

    Added margin: 0 to the h2 and p elements to ensure consistent spacing.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search