IE11 fails to adhere to specified sizes in CSS Grid layout

Question

IE11 fails to adhere to specified sizes in CSS Grid layout

I've been trying to replicate the display:grid and grid-template-columns functionality on IE11, but I can't seem to get it to work properly like it does in Chrome. What am I missing? Also, when I pasted my code into the snippet, the yellow bar doesn't appear.

.ctn_mapa_hoteles {
  display: grid;
  display: -ms-grid;
  grid-template-columns: 300px 790px auto;
  -ms-grid-columns: 300px 790px auto;
}

.col_ctn_filtros {
  height: 85vh;
  padding: 30px;
  overflow-y: auto;
  background-color: cyan;
}

.col_ctn_hoteles {
  padding-left: 0px;
  padding-right: 0px;
  background-color: #f5f5f5;
}

.col_ctn_mapa {
  background-color: yellow;
}

<div class="ctn_mapa_hoteles">
  <div class="col_ctn_filtros">
  </div>
  <div class="col_ctn_hoteles">
  </div>
  <div class="col_ctn_mapa">
  </div>
</div>

html css internet-explorer

Answer 1

Answer №1

To ensure proper display in IE 11, you must explicitly define the position of each child element within the grid:

.ctn_mapa_hoteles {
  grid-template-columns: 300px 790px auto;
  display: grid;
}

.col_ctn_filtros {
  height: 85vh;
  padding: 30px;
  overflow-y: auto;
  background-color: cyan;
}

.col_ctn_hoteles {
  padding-left: 0px;
  padding-right: 0px;
  background-color: #f5f5f5;
}

.col_ctn_mapa {
  background-color: yellow;
}
/* IE11 fix grid layout */
.ctn_mapa_hoteles {
  display: -ms-grid;
  -ms-grid-columns: 300px 790px 1fr;/* note 1fr instead auto */
}

.col_ctn_filtros {
  -ms-grid-column:1;
}

.col_ctn_hoteles {
  -ms-grid-column:2;
}

.col_ctn_mapa {
  -ms-grid-column:3;
}

<div class="ctn_mapa_hoteles">
  <div class="col_ctn_filtros">12
  </div>
  <div class="col_ctn_hoteles">45
  </div>
  <div class="col_ctn_mapa">78
  </div>
</div>

For a live example that works in IE11, check out this jsbin link: https://jsbin.com/qiwehinuwi/1/edit?html,css,output

If you need to use auto-flow for grid layouts but it's not supported in IE, consider setting up an alternative layout specifically for IE. Here is another question discussing a responsive layout example for IE11: Responsive Layout when using grid

Answer 2

To ensure proper display in IE 11, you must explicitly define the position of each child element within the grid:

.ctn_mapa_hoteles {
  grid-template-columns: 300px 790px auto;
  display: grid;
}

.col_ctn_filtros {
  height: 85vh;
  padding: 30px;
  overflow-y: auto;
  background-color: cyan;
}

.col_ctn_hoteles {
  padding-left: 0px;
  padding-right: 0px;
  background-color: #f5f5f5;
}

.col_ctn_mapa {
  background-color: yellow;
}
/* IE11 fix grid layout */
.ctn_mapa_hoteles {
  display: -ms-grid;
  -ms-grid-columns: 300px 790px 1fr;/* note 1fr instead auto */
}

.col_ctn_filtros {
  -ms-grid-column:1;
}

.col_ctn_hoteles {
  -ms-grid-column:2;
}

.col_ctn_mapa {
  -ms-grid-column:3;
}

<div class="ctn_mapa_hoteles">
  <div class="col_ctn_filtros">12
  </div>
  <div class="col_ctn_hoteles">45
  </div>
  <div class="col_ctn_mapa">78
  </div>
</div>

For a live example that works in IE11, check out this jsbin link: https://jsbin.com/qiwehinuwi/1/edit?html,css,output

If you need to use auto-flow for grid layouts but it's not supported in IE, consider setting up an alternative layout specifically for IE. Here is another question discussing a responsive layout example for IE11: Responsive Layout when using grid

Answer 3

Answer №2

I've encountered the same issue before. Internet Explorer can be tough for developers to work with. While both Grids and Flexbox have their advantages, I personally prefer using Grids. Unfortunately, IE does not support Grids, so it's necessary to implement a Flexbox fallback solution using media queries.

 // Fallback for IE 
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

// Insert flexbox code here

.yourdivclassname {
  display: inline-flex;

}

}

For other browsers that support Grid (such as Firefox, Chrome, Edge, etc)

@supports (display: grid) {

.yourdivclassname {
   display: grid;

}
}

This approach has helped me maintain consistent webpage designs across different browsers. I typically start with the grid layout, fine-tune it, then replicate it using Flexbox by substituting references to Grids.

If you need resources on Flexbox, I recommend this helpful tutorial: Flexbox Tutorial

For those interested in learning about Grids, check out this comprehensive guide: Grids Tutorial

Answer 4

I've encountered the same issue before. Internet Explorer can be tough for developers to work with. While both Grids and Flexbox have their advantages, I personally prefer using Grids. Unfortunately, IE does not support Grids, so it's necessary to implement a Flexbox fallback solution using media queries.

 // Fallback for IE 
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

// Insert flexbox code here

.yourdivclassname {
  display: inline-flex;

}

}

For other browsers that support Grid (such as Firefox, Chrome, Edge, etc)

@supports (display: grid) {

.yourdivclassname {
   display: grid;

}
}

This approach has helped me maintain consistent webpage designs across different browsers. I typically start with the grid layout, fine-tune it, then replicate it using Flexbox by substituting references to Grids.

If you need resources on Flexbox, I recommend this helpful tutorial: Flexbox Tutorial

For those interested in learning about Grids, check out this comprehensive guide: Grids Tutorial

IE11 fails to adhere to specified sizes in CSS Grid layout

Answer №1

Answer №2

Similar questions

I seem to have misplaced the textbox and the images are all jumbled up on my

The Stripe card element seems to be missing from the form

Tips for ensuring that content doesn't shift down when clicking a drop-down menu

Broaden the default className attribute of the component

Refresh the data in a table upon clicking the menu

Having trouble with the Image Path not connecting from the backend to the frontend of my application

Unveiling the secrets to isolating elements from a list based on distinct characteristics

What is the best way to implement seamless transitions between different components in my code?

Use Jquery to revert the chosen element back to its original base state

What is the best method for efficiently wrapping contents within a div container?

Achieve equal height columns when they are stacked vertically using Bootstrap 5

Creating a personalized notification box that is compatible with various screen sizes and web browsers on android devices with the help of

Adding a JavaScript global variable into a <div> element within the HTML body

An elusive error detected within a JavaScript try-catch block

What is the reason for the position of div1 not being directly in the top right corner when its position is set to div2's top and left offset plus div2's width?

Manipulating HTML elements while inside an SVG tag: a comprehensive guide

Bootstrap: Create a square by setting the height equal to the width of the .span2 element

Delete the content within the span tag

iOS Font Display Issue in Ionic 2

What is the best way to ensure my gif shows up in the top row and spans two columns in this grid?