Core Code
Core Code Modern Dev Handbook

Grid Feature Detection

Enable Grid layout only if supported.

Preview

Code

<style>
.container{
display:block;
}

@supports (display:grid){
.container{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
}

.item{
background:#22c55e;
color:white;
padding:20px;
}
</style>

<div class="container">
<div class="item">A</div>
<div class="item">B</div>
</div>

More CSS @supports Examples (8)

example Basic @supports Query open example example Flexbox Fallback open example example Using not in @supports open example example Multiple Feature Conditions open example example OR Condition Example open example example Grid Progressive Enhancement open example example Aspect Ratio Feature Query open example example Modern CSS Enhancement open example