Dynamic Grid Layout with Varying Item Sizes

.dynamic-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: minmax(100px, auto); /* Flexible row heights */
  gap: 15px;
  padding: 15px;
}

.grid-item {
  background-color: #ffc107;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
}

.item-span-2-cols {
  grid-column: span 2;
}

.item-span-2-rows {
  grid-row: span 2;
}

.item-span-all-cols {
  grid-column: 1 / -1;
}

How it works: This Grid example showcases how to create dynamic layouts where items can span multiple columns or rows. `grid-template-columns` uses `auto-fit` for responsiveness, while `grid-auto-rows: minmax(100px, auto);` allows rows to be at least 100px tall but adjust to content. Individual items can then use `grid-column: span X;` or `grid-row: span Y;` to occupy more space, and `grid-column: 1 / -1;` to span all available columns, creating varied and engaging designs.