CSS - Creating div grid compatible for chrome and ie10

Question

I have a jquery/css problem, I have a grid that I am overlay across my website for an attempt at making an ARG codebreaker web browser game, however I'm have compatibility issues with the fact that CSS doesn't recognize

<div id ="grid" class="grid-container" style="pointer-events:none; touch-action: none;">
  <div id ="symbol1" class="null"></div>
  <div id ="symbol2" class="null"></div>
  <div id ="symbol3" class="null"></div>
  <div id ="symbol4" class="null"></div>
  <div id ="symbol5" class="null"></div>
  <div id ="symbol6" class="null"></div>
  <div id ="symbol7" class="null"></div>
  <div id ="symbol8" class="null"></div>
  <div id ="symbol9" class="null"></div>
  <div id ="symbol10" class="null"></div>
</div>

The idea is to overlay faint symbol on game screen that are changed by jquery and you can click on items below it. This now works for all browsers except Iexplore 10-11 which I wish to support.

This div grid is declared in css as

 .grid-container {
 position: absolute;
 left: -20px;
 width: 100%;
 height: 80%;
 display: inline-grid;
 grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
  padding: 10px;
  z-index: 2;
  pointer-events:none;
  touch-action: none;
  width:100%;
  height:100%;  
}

.grid-item {
  padding: 10px;
  height: 60px;
  width: 60px;
  font-size: 15px;
  text-align: center;
  z-index: 2;
  position: absolute;
  touch-action: none;
  pointer-events: none;
}

Each symbol is a subclass of grid item and the div's are changed to the right subclass of div item randomly but with secret sequence.

Obviously IE10-11 do not support grid-template colums: so how can I be change the grid to still work this way and a way compatible for IExplore ?

Example This is how I want website look. but instead of it being 12 grid space it is 20x10 grid 20 across 10 deep.

A note I wish to add is that, I must have it so that it can change based on page load, random symbols but the sequence imports a javascript variable from another location, this is best way of doing this method I think. I cannot just do by overlaying image. I have to edit the div's upon page load to be the symbol I want.

What is best method for this ?

This isn’t the most complicated grid to begin with, so I think you should be able to achieve it using flexbox as well (and support for that in IE is a lot better.) — CBroe, Mar 23 '18 at 09:56
Thank you, good advice, I will google this, my background is not web development but Unity and C++ but I wanted to start make browser ARG for possible project. — KijmanNupta, Mar 23 '18 at 10:16

RNewell122 · Accepted Answer · 2018-03-23T11:14:05.490

I have found your answer concerning flex-box here: (css grid of squares with flexbox)

You may be better off reworking it to just this method rather than using CSS auto in the future.

It has a JS fiddle example also by USER:@G-Cyr

   .grid-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row;
    justify-content: space-around;

    line-height:30px;
}
.grid-item {
    background: tomato; <* replace with your default symbol image url here*>
   <* assuming your jquery is changing them at runtime should work*>
    margin: 5px;
    color: white;
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
    flex: 1 0 auto;
    height:auto;
}
.grid-item:before {
    content:'';
    float:left;
    padding-top:100%;
}

You'll also have to create a container for each row

CSS - Creating div grid compatible for chrome and ie10

1 Answers1