.grid-space-distribution {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 200px)); /* Fixed size columns with a max */
  /* Or: grid-template-columns: 200px 200px 200px; */
  grid-template-rows: auto;
  gap: 15px; /* Space between grid cells */
  width: 80%; /* Container is wider than total column width */
  max-width: 1000px;
  margin: 30px auto;
  border: 2px solid #a0a0ff;
  padding: 10px;
  background-color: #e0f0ff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* Options for horizontal content alignment when columns don't fill the grid */
/* Uncomment one of these: */
/* justify-content: start;    *//* Default: items aligned to the start */
/* justify-content: end;      *//* Items aligned to the end */
/* justify-content: center;   *//* Items centered */
justify-content: space-between; /* Items distributed with space between them */
/* justify-content: space-around; *//* Space before, between, and after items */
/* justify-content: space-evenly; *//* Even space around items */


/* Options for vertical content alignment */
/* align-content: start;    *//* Default: items aligned to the start */
/* align-content: end;      *//* Items aligned to the end */
/* align-content: center;   *//* Items centered */
/* align-content: space-between; *//* Items distributed with space between them */
/* align-content: space-around; *//* Space before, between, and after items */
/* align-content: space-evenly; *//* Even space around items */


.grid-item-space {
  background-color: #ccddff;
  border: 1px solid #99bbff;
  padding: 15px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  border-radius: 5px;
  font-weight: bold;
  color: #333;
}

/* Example HTML:
<div class="grid-space-distribution">
  <div class="grid-item-space">Item 1</div>
  <div class="grid-item-space">Item 2</div>
  <div class="grid-item-space">Item 3</div>
</div>
*/