Display Grid for IE11

Asked

Viewed 259 times

3

I’m making a grid with the 7 items according to the code below:

My code

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>

In other words, I’m making a menu at the bottom of the page, I like the customer, within a fieldset basically according to image: inserir a descrição da imagem aqui

So far so good, but the problem is that I came across customers who use IE11 that just doesn’t have compatibility. Even using -ms- the browser does not accept. Other browsers accepted: Chrome, Firefoz, Edge (Safari and Opera I will still test).

Is there another way for compatibility? There are unique compatibility tags for IE11?

Sorry if the text got confused!

  • 1

    Note: Opera uses the same Chrome engine no need to test

  • 1

    Expensive not all Grid classes work on IE10 and 11, as these Ies use the old Grid specification property grid-template-areas for example did not exist in the old specification, you can see here https://rachelandrew.co.uk/archives/2016/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/ apart from that I think you get this layout with Flexbox does not need Grid depending on what you want. If you want I make a model with Flex for you.

  • Thanks guys, I haven’t done the tests yet, because I am leaving this compatibility last. I will study, test, and warn you about the result.

  • Good evening, today I went to perform on 'display:grid' for IE11 and to my surprise: When I visualized the div’s were side by side as image above... Why is it?! I don’t know!!! I warned customers about this difficulty with IE11 and suggested to present an alert informing users to use browsers except IE11. hugocsl if it’s no bother would accept the model for me to study and the next apply them. And thank you for the class you gave. Sveen thanks for the tip, nor installed in PC Opera. - Diego Primo now edit

  • Guy like you took a few days to put this comment that would like to see a flex box version turned out that I did not see. I know that very probably you have already solved the problem. But if you still want a Flex version tell me that I can come up with an example, along with other explanations etc...

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.