Should I use a CSS grid layout when MS Edge still doesn't have support?

Answer 1

No, You can use a CSS grid layout even if MS Edge doesn't have support for it. You can use feature queries to check if the user's browser supports the grid layout, and if so, use the grid layout. If the browser does not support the grid layout, you can use an older method such as floats or inline-block. here is an one example * {

box-sizing: border-box;

}

.wrapper {

border: 2px solid #f76707;

border-radius: 5px;

background-color: #fff4e6;

max-width: 600px;

margin: 0 auto; }

.wrapper ul {

margin: 0 -10px;

padding: 0;

list-style: none;

}

.wrapper li {

float: left;

width: calc(33.333333% - 20px);

margin: 0 10px 20px 10px;

}

@supports (display: grid) {

.wrapper ul {

display: grid;

grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0;

}

.wrapper li {

width: auto;

margin: 0;

}

}

In this example, if the user's browser supports the grid layout, the ul element will be displayed as a grid. If the browser does not support the grid layout, the li elements will be displayed as floats. This ensures that the layout will still work in non-supporting browsers, while also allowing you to take advantage of the grid layout in supporting browsers.