Using min(), max() and clamp() to set gap between grid items

index.html

<div class="container">
  <div class="min-container">
    <h2>Applying min() to set gap</h2>
    <div>Item-1</div>
    <div>Item-2</div>
    <div>Item-3</div>
    <div>Item-4</div>
    <div>Item-5</div>
  </div>

  <div class="max-container">
    <h2>Applying max() to set gap</h2>
    <div>Item-1</div>
    <div>Item-2</div>
  </div>

  <div class="clamp-container">
    <h2>Applying clamp() to set gap</h2>
    <div>Item-1</div>
    <div>Item-2</div>
    <div>Item-3</div>
    <div>Item-4</div>
    <div>Item-5</div>
  </div>
</div>

style.css

:root {
  --spacing: 1rem;
}

/* USING MIN() FUNCTION TO SET GAP FOR GRID ITEMS INSIDE MIN-CONTAINER */
.min-container {
  gap: min(
    5px,
    10%
  ); /* elements will have a gap of at least 5 pixels or 10% of the parent element's width, whichever is larger */
}

/* USING MAX() FUNCTION TO SET GAP FOR GRID ITEMS INSIDE MAX-CONTAINER */
.max-container {
  gap: max(
    20px,
    10%
  ); /* elements will have a gap of at most 50px pixels or 10% of the parent element's width, whichever is smaller */
}

/* USING MAX() FUNCTION TO SET GAP FOR GRID ITEMS INSIDE MAX-CONTAINER */
.clamp-container {
  gap: clamp(
    5px,
    10%,
    10px
  ); /* element will have a gap of at least 5 pixels, at most 20 pixels, and otherwise a value between 5 pixels and 20 pixels, as determined by the percentage value */
}

/* ============================= */
/* =========OTHER STYLES======== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font-family: sans-serif;
  color: #262626;
}

.container {
  min-height: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing);
  padding: var(--spacing);
  place-items: center;
  border: 16px ridge #ff6550;
  background: #ffe7e7;
}

.container > div {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  background: #ea5b4853;
  padding: var(--spacing);
}

.container > div > div {
  width: 100%;
  height: 100px;
  background: #222;
  color: #eee;
}

h1 {
  margin-bottom: var(--spacing);
  font-weight: 900;
}

h1,
h2 {
  text-align: center;
}

h2 {
  grid-column: 1 /-1;
  padding: 20px 0;
}