CSS Grid Layout in Stupid Internet Explorer 11 using -ms styles

How To Get Your Web Pages to Display CSS Grids in IE and Chrome

All of us web developers know that IE 10 and 11 cannot display grid layouts like FireFox and Chrome.  In fact we know that Microsoft is lagging behind on their support of standards in their IE browser. Thanks Steve and Bill!   However some of us are discovering that Edge can display them kind of correctly now.  Unfortunately, Edge is as stupid as IE.   If you developed fantastic looking grid layout pages for Chrome and do not want to revert back to old fashioned table layouts, I have the ultimate solution for you. It's called vendor extensions.
First thing to do is to drop some of your CSS into the autoprefixer to allow it to add new MS vendor extensions. Then you add your new CSS into your sheets.
If you had this CSS and it worked in Chrome, you will then add -ms-grid and -ms-grid-columns. Plus you will also add .ms-grid-row and -ms-grid-column to each row/column cell.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

Then you will get this out of the autoprefixer. just add the -ms elements to your CSS.

.grid-container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto auto auto;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

Then you need to add these CSS elements to tell stupid IE where to put each cell, or it will overlay everything in the first row/column. duh.

.rc11 { -ms-grid-row: 1; -ms-grid-column: 1; }
.rc12 { -ms-grid-row: 1; -ms-grid-column: 2; }
.rc13 { -ms-grid-row: 1; -ms-grid-column: 3; }
.rc21 { -ms-grid-row: 2; -ms-grid-column: 1; }
.rc22 { -ms-grid-row: 2; -ms-grid-column: 2; }
.rc23 { -ms-grid-row: 2; -ms-grid-column: 3; }
.rc31 { -ms-grid-row: 3; -ms-grid-column: 1; }
.rc32 { -ms-grid-row: 3; -ms-grid-column: 2; }
.rc33 { -ms-grid-row: 3; -ms-grid-column: 3; }
.rc41 { -ms-grid-row: 4; -ms-grid-column: 1; }
.rc42 { -ms-grid-row: 4; -ms-grid-column: 2; }
.rc43 { -ms-grid-row: 4; -ms-grid-column: 3; }
.rc51 { -ms-grid-row: 5; -ms-grid-column: 1; }
.rc52 { -ms-grid-row: 5; -ms-grid-column: 2; }
.rc53 { -ms-grid-row: 5; -ms-grid-column: 3; }

This is how these .rcNN will be used in each grid cell. This is a snippet of HTML from a form.

      <form action="registration.php" method="post" id="subForm" style="margin: 10px 0 8px;">
          <div class="grid-container">
             <div class="grid-item rc11">
             <span>First Name</span>
             <input class="f_left" type="text" name="firstname" id="firstname" value="First Name" onkeyup="clean('firstname')" onkeydown="clean('firstname')" maxlength="40"
               onfocus="javascript:if(this.value=='First Name') {this.value='';}" onblur="javascript:if(this.value=='') {this.value='First Name'}" />
             </div>

             <div class="grid-item rc12">
             <span>Last Name</span>
             <input class="f_left" type="text" name="lastname" id="lastname" value="Last Name" onkeyup="clean('lastname')" onkeydown="clean('lastname')" maxlength="40"
               onfocus="javascript:if(this.value=='Last Name') {this.value='';}" onblur="javascript:if(this.value=='') {this.value='Last Name'}" />
             </div>

             <div class="grid-item rc13">
             <span>Email Address</span>
             <input class="f_left" type="text" name="email" id="email" value="Email Address" onkeyup="clean('email')" onkeydown="clean('email')" maxlength="40"
               onfocus="javascript:if(this.value=='Email Address') {this.value='';}" onblur="javascript:if(this.value=='') {this.value='Email Address'}" />
             </div>

             <div class="grid-item rc21">
             <span>Password</span>
             <input class="f_left" type="password" name="password" id="password" value="Password" onkeyup="clean('password')" onkeydown="clean('password')" maxlength="40"
               onfocus="javascript:if(this.value=='Password') {this.value='';}" onblur="javascript:if(this.value=='') {this.value='Password'}" />
             </div>

             <div class="grid-item rc22">
             <span>Phone Number</span>
             <input class="f_left" type="text" name="phone" id="phone" value="Phone Number" onkeyup="clean('phone')" onkeydown="clean('phone')" maxlength="40"
               onfocus="javascript:if(this.value=='Phone Number') {this.value='';}" onblur="javascript:if(this.value=='') {this.value='Phone Number'}" />
             </div>

             <div class="grid-item rc23">
             <span>Company Name</span>
             <input class="f_left" type="text" name="company" id="company" value="Company Name" onkeyup="clean('company')" onkeydown="clean('company')" maxlength="40"
               onfocus="javascript:if(this.value=='Company Name') {this.value='';}" onblur="javascript:if(this.value=='') {this.value='Company Name'}" />
             </div>

This is how it looks in IE now. (this is the form)