Estou fazendo uma grade com o 7 itens conforme o código abaixo:
Meu código
nav div.grade {
display: grid;
grid-template-columns: auto auto auto auto;
margin-top: 5px;
display: -ms-grid;
-ms-flex-direction: column;
-ms-grid-auto-columns: 100px;
}
nav div.iten_grade {
width: 220px;
background-color: #d6d6d6;
text-align: center;
height: 40px;
justify-content: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
align-items: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
margin: 10px 45px 0px 45px;
/*Compatibilidade */
display: -webkit-flex;
display: -moz-flex;
display: -ms-grid;
display: -o-flex;
display: flex;
color: #555555;
-ms-float: right;
}
<div class="grade">
<div class="iten_grade">
<a href="#">1</a>
</div>
<div class="iten_grade">
<a href="#">1</a>
</div>
<div class="iten_grade">
<a href="#">1</a>
</div>
<div class="iten_grade">
<a href="#">1</a>
</div>
<div class="iten_grade">
<a href="#">1</a>
</div>
<div class="iten_grade">
<a href="#">1</a>
</div>
<div class="iten_grade">
<a href="#">1</a>
</div>
</div>
Em outras palavras, estou fazendo um menu no rodapé da página, gosto do cliente, dentro de uma fieldset
basicamente conforme imagem:
Até aí tudo bem, mas o problema é que me deparei com clientes que usam o IE11 que simplesmente não tem compatibilidade. Mesmo usando -ms-
o navegador não aceita. Os demais navegadores aceitaram: Chrome, FireFoz, Edge (Safari e Opera ainda irei testar).
Há outra forma de compatibilidade? Há tags exclusivas de compatibilidade para o IE11?
Desculpa se o texto ficou confuso!
grid-template-areas
por exemplo não existia na especificação antiga, vc pode consultar mais aqui rachelandrew.co.uk/archives/2016/11/26/… tirando isso acho que vc consegue esse layout com FlexBox não precisa de Grid dependendo do que pretende. Se quiser faço um modelo com Flex pra vc. – hugocsl 7/05/18 às 22:32