Generated by SassMeister.com.

input.scss

@mixin content-visibility($size: 1000px) {
    content-visibility: auto;
    contain-intrinsic-size: $size;
}

.outer-wrapper {
    max-width: 940px;
    margin: 0 auto;
}

.wrapper {
    @supports (display: grid) {
        display: grid;
        grid-column-gap: 30px;
    }
    
    @media (max-width: 1024px) and (min-width: 641px){
        @supports (display: grid) {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    @media (min-width: 1025px){
        @supports (display: grid) {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}

article {
    background: #efefef;
    padding: 10px;
    margin: 5px;
    
    &:nth-child(n+9) {
        //@include content-visibility();
        background: #ff0000;
    }
}

markup.html

<div class="outer-wrapper">
    <div class="wrapper">
        <article>
            <h1>Headding 1</h1>
            <p>This is a paragraph</p>
        </article>
        <article>
            <h1>Headding 2</h1>
            <p>This is a paragraph</p>
        </article>
        <article>
            <h1>Headding 3</h1>
            <p>This is a paragraph</p>
        </article>
        <article>
            <h1>Headding 4</h1>
            <p>This is a paragraph</p>
        </article>
        <article>
            <h1>Headding 5</h1>
            <p>This is a paragraph</p>
        </article>
        <article>
            <h1>Headding 6</h1>
            <p>This is a paragraph</p>
        </article>
        <article>
            <h1>Headding 7</h1>
            <p>This is a paragraph</p>
        </article>
        <article>
            <h1>Headding 8</h1>
            <p>This is a paragraph</p>
        </article>
        <article>
            <h1>Headding 9</h1>
            <p>This is a paragraph</p>
        </article>
        <article>
            <h1>Headding 10</h1>
            <p>This is a paragraph</p>
        </article>
        <article>
            <h1>Headding 11</h1>
            <p>This is a paragraph</p>
        </article>
        <article>
            <h1>Headding 12</h1>
            <p>This is a paragraph</p>
        </article>
    </div>
</div>

output.css

.outer-wrapper {
  max-width: 940px;
  margin: 0 auto;
}

@supports (display: grid) {
  .wrapper {
    display: grid;
    grid-column-gap: 30px;
  }
}
@media (max-width: 1024px) and (min-width: 641px) {
  @supports (display: grid) {
    .wrapper {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}
@media (min-width: 1025px) {
  @supports (display: grid) {
    .wrapper {
      grid-template-columns: repeat(3, 1fr);
    }
  }
}

article {
  background: #efefef;
  padding: 10px;
  margin: 5px;
}
article:nth-child(n+9) {
  background: #ff0000;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}