There was a problem when checking the site for cross-browser compatibility: the blocks for the layout were placed using the grid, it works correctly in all browsers, except for our favorite IE (you must make an adaptation for IE11). Spent a lot of time to address this issue, but did not achieve the expected result. The prefixes didn't help much, but the problem was reduced to the fact that the blocks are now displayed one on top of the other on the first cell. Here is the implementation: https://codepen.io/Tony2Night/pen/VVYVoZ

HTML

<section class="start"> <div class="start__manager"> <a href="#" class="manager"> <div class="start__info"> <p>are you</p> <p> <strong>manager?</strong> </p> </div> </a> </div> <div class="start__programmer"> <a href="#" class="programmer"> <div class="start__info"> <p>are you</p> <p> <strong>programmer?</strong> </p> </div> </a> </div> </section>

CSS

 .start { display: grid; display: -ms-grid; grid-template-columns: 1fr 1fr; -ms-grid-columns: 1fr 1fr; -ms-grid-rows: 1fr; width: 100%; height: 100vh; } .start__manager, .start__programmer { display: flex; align-items: center; justify-content: center; } .start__manager { background-color: yellow; } .start__programmer { background-color: green; }
  • 2
    Use the @supports directive, first write the styles on float,flex or whatever is convenient for you and what works in IE and put grids in supports . Alternatively, you can search for polyfil. - E_K 4:16

1 answer 1

The CSS Grid Layout standard is still not widely supported. Moreover, the specification itself is not officially approved .

Is there any need to necessarily use a grid? Your example can be easily implemented without using a Grid .

  • Exclusively of their own accord, just had the idea to implement the entire framework of the site in this way, but I had to give up and take on the float - Anton Kylbashnyi