body {
  font-family: system-ui, sans-serif;
  margin: 20px;
  line-height: 1.5;
}

h1, h2 {
  margin-bottom: 0.5em;
}

.example {
  margin-bottom: 3em;
}

.grid {
  display: grid;
  border: 2px solid #333;
  margin-top: 0.5em;
}

/* Shared styles for sidebar and main */
.sidebar {
  background: #007284;
  color: white;
  padding: 16px;
}

.main {
  background: #e8f8f8;
  padding: 16px;
}

/* 1. Auto */
.auto .grid {
  grid-template-columns: auto 1fr;
}


/* 2. Fixed width */
.fixed .grid {
  grid-template-columns: 200px 1fr;
}

/* 3. Percentage */
.percent .grid {
  grid-template-columns: 20% 80%;
}

/* 4. Fractional */
.fr .grid {
  grid-template-columns: 1fr 3fr;
}

/* 5. Minmax */
.minmax .grid {
  grid-template-columns: minmax(150px, 200px) 1fr;
}