How can I create a layout with equally sized items using CSS?

Creating a Layout with Equally Sized Items Using CSS

The goal is to achieve a layout where each item has the same width as the widest element, regardless of the content. This layout can have multiple lines and wrap items accordingly.

Using JavaScript

As demonstrated in the example provided, JavaScript can easily accomplish this task by calculating the maximum width among the items and then assigning that width to all the elements.

Achieving the Same Layout with CSS

It is also possible to achieve this layout using pure CSS, without the need for JavaScript. Here's how:

.list-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

.list {
  display: flex;
  flex-direction: column;
}

.list-item {
  text-transform: capitalize;
  background-color: rgb(200, 30, 40);
  font-size: 1.3em;
  text-align: left;
  padding: 10px;
  margin: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

This CSS applies the following styles:

• The .list-container acts as the container that wraps the list.
• The .list is responsible for displaying the items vertically.
• The .list-item applies styles to each individual item.

By setting the flex-wrap property to wrap and specifying the justify-content as flex-start within .list-item, we ensure that the items will wrap to new lines when necessary, while maintaining their justification to the start of the line.

The above is the detailed content of How can I create a layout with equally sized items using CSS?. For more information, please follow other related articles on the PHP Chinese website!