Scope & CSS Grid - VSADX/scoped-css GitHub Wiki

Using Scoped CSS for layout or general structure is simple

  1. Find the element you want to give grid rules to
  2. Place a <style class="scoped"> inside
  3. Type \& { display: grid; }
  4. Add any other grid settings there also

Example: simple CSS Grid

<section>
  <div> Column One </div>
  <div> Column Two </div>

  <style class="scoped">
    \& {
      display: grid;
      grid-template-columns: 1.5fr 1fr;
    }
  </style>
</section>

End notes

What's next? Try complex grid layouts
You can reorder HTML elements in your grid from CSS using the order: <number>; property. This works great with > selector in CSS.

<section>
  <div> Please show second </div>
  <aside> Show this first </aside>

  <style class="scoped">
   \& { display: grid; }
   \& > aside {
     order: -1;
   } 
  </style>
</section>
⚠️ **GitHub.com Fallback** ⚠️