Grid System

Shoelace doesn’t ship with a grid system because you don’t need one. You should use the CSS Grid Layout instead.

This website uses the CSS Grid Layout. It’s really simple!

<main id="wrap">
  <nav id="nav">
    ...
  </nav>

  <div id="content">
    ...
  </div>
</main>

Now we just need a couple styles to turn the nav and content elements into columns. This will make the nav 12rem wide and the content 100% - 12rem so it fills the rest of the space.

#wrap {
  display: grid;
  grid-template-columns: 12rem calc(100% - 12rem);
}

You can use media queries to make grids responsive. This is how we make the nav appear on top of the content on smaller screens.

@media (max-width: 60rem) {
  #wrap {
    display: block;
  }
}

Support for CSS Grid Layouts is very good, but if you have an obligation to support older browsers, consider using the Bootstrap grid without any extras in combination with Shoelace.