Deixar TODOS os blocos do mesmo tamanho utilizando apenas CSS não sei se é possível (desconheço) já que cada linha passa a se tornar independente, mas cada elemento de uma linha tem uma certa ligação e podem ser usadas como parâmetro para manter todos os outros (da mesma linha) com o mesmo tamanho.
A forma mais fácil de conseguir esse resultado é utilizando o Flex:
ul{
list-style: none;
padding: 0;margin: 0;
display: flex;
flex-wrap: wrap;
}
li{
width: 25%;
border: 5px solid black;
margin: 5px;
padding: 3px;
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi rerum doloremque laborum? </li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et quasi corporis sed fugit quibusdam, possimus ipsam animi ab molestias. Eos qui id sint mollitia amet officiis, commodi natus officia libero.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>
o display: flex
por padrão já deixará todos os elementos com o mesmo tamanho, mas você perde o controle sobre sua largura ele tentará deixar tudo na mesma linha, desrespeitando a largura definida ou os limites da página ou elemento pai, que pode ser resolvido utilizando o flex-wrap
, que permite quebrar a linha assim que os elementos ultrapassem a tela.
Fica aí uma alternativa, porém não resolve 100%.
height: 100%
só funciona se os elementos superiores tiverem altura definida.flex
.