How Can I Center a Box with Left-Aligned Last Row Using CSS Grid?

Center Alignment with Left-Aligned Last Row

This query addresses the challenge of aligning boxes within a container, centered horizontally but with the last row justified to the left. The key issue is that typical ul elements tend to fit their width based on their content, leaving no room for manual adjustments.

To solve this, we can leverage CSS grid, which provides more control over element placement. Here's an updated CSS and HTML code snippet:

div {
  padding: 20px;
  width: 200px;
  border: 1px solid;
  overflow: hidden;
  resize: horizontal;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, 40px); /* width of elements here */
  grid-auto-rows: 40px; /* height here */
  grid-gap: 4px;
  justify-content: center; /* this will do the magic */
}

ul li {
  background-color: wheat;
}

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

By adding justify-content: center; to the ul element, we shift the content towards the center. However, we maintain left alignment for the last row, which is an inherent property of CSS grid.

To adjust the width and height of the elements, modify the values within grid-template-columns and grid-auto-rows. Adjust the padding and width properties of the div to fit your design requirements.

By embracing the flexibility of CSS grid, we can achieve dynamic content alignment without relying on manual adjustments or scripts.

The above is the detailed content of How Can I Center a Box with Left-Aligned Last Row Using CSS Grid?. For more information, please follow other related articles on the PHP Chinese website!