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.