<template>
  <div class="chrome-layout-grid">
    <header class="chrome-layout-grid--chrome-area">
      <slot name="chrome"></slot>
    </header>
    <main class="chrome-layout-grid--main-area">
      <slot></slot>
    </main>
  </div>
</template>

<style lang="scss" scoped>
.chrome-layout-grid {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-rows: 100vh;
  grid-template-areas: "chrome main";
}

.chrome-layout-grid--chrome-area {
  grid-area: chrome;
}

.chrome-layout-grid--main-area {
  grid-area: main;
}
</style>
