How to Center a Grid of Boxes While Left-Aligning the Last Row?

How to Center Boxes but Align Last Row to Left

Problem:

A user wants to align boxes in a container to the center, but keep the last row aligned to the left. In other words, they want to prevent the text from being centered in the last row.

Relevant Code:

div {
  padding: 20px;
  width: 200px;
  background-color: green;
  text-align: center;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

ul li {
  width: 40px;
  height: 40px;
  background-color: wheat;
  display: inline-block;
}

Example Result:

item1	item2	item3
item4	item5	item6
item7	item8	item9

Solution using CSS Grid:

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;
}

Example Result:

item1	item2	item3
item4	item5	item6
item7	item8	item9

Explanation:

• The CSS Grid layout is used instead of flexbox or inline-block.
• The justify-content: center; property of the ul element aligns the boxes to the center of the parent container.
• The grid-template-columns property defines the width of each box.
• The grid-gap property controls the space between the boxes.
• This solution automatically aligns boxes in the center and accommodates rows of varying lengths without the need for manual adjustments or scripts.

The above is the detailed content of How to Center a Grid of Boxes While Left-Aligning the Last Row?. For more information, please follow other related articles on the PHP Chinese website!