/* AUTO SIZE */
.grid-container {
  display: grid;
  grid-template-rows: 100px auto;
  grid-template-columns: 200px auto;
}

.grid-item {
  font-size: 3rem;
  background-color: darkviolet;
  border: 5px solid goldenrod;
  color: white;
}

/* FIXED SIZE */
.fixed-grid-container {
  display: grid;
  grid-template-rows: 100px 200px;
  grid-template-columns: 400px 800px;
}

.fixed-grid-item {
  font-size: 3rem;
  background-color: darkviolet;
  border: 5px solid goldenrod;
  color: white;
}

/* FRACTIONAL SIZING */
.frac-grid-container {
  display: grid;
  grid-template-rows: 1fr 2fr;
  grid-template-columns: 1fr 2fr;
}

.frac-grid-item {
  font-size: 3rem;
  background-color: darkviolet;
  border: 5px solid goldenrod;
  color: white;
}

/* MINMAX SIZING */
.min-grid-container {
  display: grid;
  grid-template-rows: 200px minmax(400px, 5fr);
  grid-template-columns: 200px minmax(400px, 5fr);
}

.min-grid-item {
  font-size: 3rem;
  background-color: darkviolet;
  border: 5px solid goldenrod;
  color: white;
}

/* REPEAT */
.rep-grid-container {
  display: grid;
  grid-template-rows: repeat(2, 200px);
  grid-template-columns: repeat(2, 200px);
  grid-auto-rows: 300px;
}

.rep-grid-item {
  font-size: 3rem;
  background-color: darkviolet;
  border: 5px solid goldenrod;
  color: white;
}