CSS even distribution

In front-end development, you often encounter situations where you need to evenly distribute page elements. This type of distribution not only makes the page look neater and more aesthetically pleasing, but also improves the user experience. In CSS, we can use a number of techniques and properties to achieve even distribution of elements. This article will detail how to achieve even distribution in CSS.

1. Using Flex Layout to Achieve Even Distribution

Flex layout is a powerful layout method that allows you to quickly and easily achieve even distribution of elements. By setting the container to display: flex; and using the justify-content and align-items properties, you can easily achieve even horizontal and vertical distribution of elements.

1. Horizontal uniform distribution

.container {
display: flex;
justify-content: space-around;
}

.item {
flex: 1;
}

In the code above, we set the display: flex; and justify-content: space-around; properties on the container, which will distribute the items evenly horizontally. Each item has its flex property set to 1, so that they share the remaining space equally.

2. Evenly Distribute Vertically

.container {
display: flex;
flex-direction: column;
justify-content: space-around;
}

.item {
flex: 1;
}

To achieve evenly distributed vertically, simply use the flex-direction: column; property. The rest of the code is similar to the horizontal even distribution method.

2. Evenly Distribute with Grid

In addition to flex layout, the new CSS property grid is also a good choice for evenly distributing elements. By setting the container to display: grid; and using the grid-template-columns and grid-template-rows properties, you can achieve a grid-like distribution of elements.

1. Evenly Distribute Horizontally

.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 20px;
}

In the code above, we set the display: grid; and grid-template-columns properties on the container. By using repeat(auto-fill, minmax(100px, 1fr)), we can evenly distribute the elements horizontally. auto-fill automatically fills the element based on the container’s width, and minmax(100px, 1fr) specifies a minimum width of 100px for each column, with the remaining space divided equally.

2. Vertically Evenly Distributed

.container {
display: grid;
grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
gap: 20px;
}

To achieve even vertical distribution, simply apply the grid-template-rows property to the container. The remaining code is similar to the horizontal distribution method.

Third, Use Margins to Achieve Even Distribution

In addition to flex and grid layouts, we can also achieve even distribution by adjusting element margins. This method is relatively simple and suitable for some simple layout situations.

1. Horizontal uniform distribution

.container { 
text-align: justify; 
} 

.item {
display: inline-block;
width: 20%;
margin: 0 2.5%;
}

In the above code, we set the text-align: justify; property on the container. By setting display: inline-block; and appropriate width and margin values for each element, we can achieve even horizontal distribution of the elements.

2. Evenly Distribute Elements Vertically

.container {
display: flex;
flex-wrap: wrap;
}

.item {
width: 20%;
margin-bottom: 20px;
}

To achieve evenly distributed elements vertically, you can set the container’s display: flex; and flex-wrap: wrap; properties, and then adjust the width and margin-bottom values for each element.

4. Summary

In this article, we introduced three common methods for evenly distributing elements, including using flex layout, grid layout, and adjusting margin values. Each of these methods has its own advantages and disadvantages, and you can choose the appropriate method based on your specific layout needs.