Pessoal não manjo munto de css e gostaria de saber como criar um menu que pode ter ate 5 opções, so que quando eu quiser ter apenas 4 opções ou 3 a largura do menu continue a mesma porem as div com as opções se ajustam ao tamanho do menu, irei deixar um exemplo abaixo
o primeiro menu(primeira imagem) tem cinco opções e tamanho 100% da tela do usuário, eu gostaria que quando necessário uma ou 2 das opções sumisse e o menu continuasse 100% da tela e que as opções ficassem maiores para cobrir todo o espaço que ficou vazio como ficou no segundo menu (segunda imagem), Desculpem se ficou meio complicado de entender...
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>menu acesso rapido</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 90px;
background-color: #005aa5;
border-radius: 4px;
color: #FFF;
text-align: center;
}
.__row-menu{
height: 80px;
width: 2px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="__col-menu">
<label>$
<p>Transferencia</p>
</label>
</div>
<div class="__col-menu">
<label>$
<p>Pagamento</p>
</label>
</div>
<div class="__col-menu">
<label>$
<p>Consultas</p>
</label>
</div>
<div class="__col-menu">
<label>$
<p>Gerenciamento</p>
</label>
</div>
<div class="__col-menu">
<label>$
<p>Teste</p>
</label>
</div>
</div>
</body>
</html>