Saludos,
- Dependiendo del grado de manipulación sobre los Items podrías usar Table, Flex, Grid o Flex + Grid. Table sería lo más sencillo, en todos los casos lo mejor es hacer que el navegador haga el cálculo. La ventaja de Table es que lo tiene innato el espaciado entre Celdas (
border-spacing) y el crecimiento equitativo de las Celdas hasta rellenar todo el espacio disponible.
Con Table<style>
.tbl-container {
background-color: red;
border-spacing: 5px;
width: 100%;
}
.tbl-container td {
background-color: orange;
}
</style>
<table class="tbl-container">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Con Flex<style>
.ul-container {
background-color: red;
display: flex;
padding: 0;
}
.ul-container li {
background-color: orange;
flex: 1;
list-style: none;
margin: 5px 5px 5px 0px;
}
.ul-container li:first-child {
margin-left: 5px;
}
</style>
<ul class="ul-container">
<li> </li>
<li> </li>
<li> </li>
</ul>
- La ventaja de Flex es que se puede manipular cada Celda individualmente, es más complejo su uso pero dependerá de los requisitos de tu proyecto.
- Por cierto a lo que @Nebire se refiere es que tienes que calcular la medida de cada espacio que se reparte, como quieres medidas relativas a un total 100% pues haces eso, repartes todo hasta llegar a un 100%, por ejemplo consideras los márgenes que en total serán 4 (postes) y luego las 3 cajas naranjas en sí (vallas), tenemos 7 objetos que se deben repartir, entonces en mi caso reparto un
1% * 4 para los márgenes y
32% * 3 para las cajas, dando todo un 100%:
Con Float<style>
.ul-container {
background-color: red;
overflow: hidden;
padding: 0;
}
.ul-container li {
background-color: orange;
float: left;
list-style: none;
margin: 1% 1% 1% 0;
width: 32%;
}
.ul-container li:first-child {
margin-left: 1%;
}
</style>
<ul class="ul-container">
<li> </li>
<li> </li>
<li> </li>
</ul>