Display a browser compatibility alert via CSS (grid support)

I can detect browser support and display an "alert" (a styled div) about compatibility for CSS grids with JS:

function isUpToDate() {
  var div = document.createElement('div')
  div.style.display = 'grid'
  return div.style.display === 'grid'
}

if (!isUpToDate) {
  displaySomethingAboutBrowserCompatibility()
}

Is there a way in raw CSS to do this kind of thing: drawing a div with CSS rules that makes the div only visible if grid is not supported?

You can use @supports for this.

Display the warning by default, and hide if it the feature you want is supported.

div {
   display: block;
   margin: 1em;
   text-align: center;
   border: solid red 4px;
}

@supports(display: grid) {
    .grids { display: none; }
}

@supports(display: fakedisplay) {
    .fakedisplay { display: none; }
}

<div class="grids">Grid is not supported</div>

<div class="fakedisplay">Fake Display is not supported</div>