Creating a Grid Container – HTML & CSS - Mastery

🤝 Grid in Action

To begin using CSS Grid, you must define a grid container using the display: grid; property. This makes its direct children grid items that can be placed into rows and columns.

🧱 Master Code block to be used further

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>

.container {
  display: grid;
  gap: 10px;
  padding: 10px;
}

.item {
  background: steelblue;
  color: white;
  text-align: center;
  padding: 20px;
  font-size: 20px;
}

🧭 Defining Columns and Rows

Use the following properties to define the grid structure:

🔹 grid-template-columns

Defines how many columns the grid should have, and their widths.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Grid Template Columns Playground</title>
<style>
  .infographic-gridcolumns {
    --ink:        #1a1a1a;
    --ink-soft:   #5c5c5c;
    --paper:      #ffffff;
    --paper-alt:  #f0ece4;
    --accent:     #2563eb;
    --accent-soft:#e3ebfd;
    --line:       #ddd6c9;
    box-sizing: border-box;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    border-radius: 14px;
    overflow: hidden;
  }
  .infographic-gridcolumns[data-theme="dark"] {
    --ink:        #e8e6e1;
    --ink-soft:   #9a968c;
    --paper:      #121212;
    --paper-alt:  #1e1e26;
    --accent:     #5b8def;
    --accent-soft:#202942;
    --line:       #2c313d;
  }
  .ha-inner { padding: 0.5rem; }
  .ha-layout { display: flex; flex-direction: column; gap: 1.1rem; }

  .ha-code {
    background: #0b0b0b;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 0.8rem 1.8rem 0.8rem 0.9rem;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.85rem;
    color: #e5e5e5;
    overflow-x: auto;
    white-space: pre-wrap;
  }
  .ha-code .ha-prop { color: #c586c0; }
  .ha-code .ha-val-hl { color: #ffd166; font-weight: 700; }
  .ha-code .ha-sel { color: #f472b6; font-weight: 700; }
  .ha-code .ha-comment { color: #5c6370; font-style: italic; }

  .ha-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }
  .ha-pill {
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .ha-pill:hover { border-color: var(--accent); }
  .ha-pill.ha-on { background: var(--accent); border-color: var(--accent); color: #fff; }

  .ha-stage {
    background: var(--paper-alt);
    border-radius: 10px;
    padding: 12px;
    display: grid;
    gap: 10px;
    box-sizing: border-box;
    overflow-x: auto;
  }
  .ha-grid-item {
    background-color: steelblue;
    color: white;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    height: 60px;
    box-sizing: border-box;
    transition: all 0.35s ease;
  }

  .ha-note {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.78rem;
    color: var(--ink-soft);
  }
</style>
</head>
<body>

<div class="infographic-gridcolumns" id="ha-root">
  <div class="ha-inner">
    <div class="ha-layout">

      <div class="ha-code" id="code-out"></div>

      <div class="ha-pills" id="col-pills">
        <button class="ha-pill ha-on" data-val="repeat(2, 1fr)">repeat(2, 1fr)</button>
        <button class="ha-pill" data-val="repeat(3, 1fr)">repeat(3, 1fr)</button>
        <button class="ha-pill" data-val="repeat(4, 1fr)">repeat(4, 1fr)</button>
        <button class="ha-pill" data-val="1fr 2fr 1fr">1fr 2fr 1fr</button>
        <button class="ha-pill" data-val="100px 1fr 100px">100px 1fr 100px</button>
        <button class="ha-pill" data-val="200px 200px 200px">200px 200px 200px</button>
      </div>

      <div class="ha-stage" id="stage">
        <div class="ha-grid-item">1</div>
        <div class="ha-grid-item">2</div>
        <div class="ha-grid-item">3</div>
        <div class="ha-grid-item">4</div>
        <div class="ha-grid-item">5</div>
        <div class="ha-grid-item">6</div>
      </div>

      <div class="ha-note" id="note-out"></div>

    </div>
  </div>
</div>

<script>
(function () {
  const wrapper = document.getElementById('ha-root');
  const bodyAttr = document.body.getAttribute('data-darkmode');
  let dark;
  if (bodyAttr === 'true') {
    dark = true;
  } else if (bodyAttr === 'false') {
    dark = false;
  } else {
    const match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
    dark = match ? match[1] === 'true' : false;
  }
  if (dark) wrapper.setAttribute('data-theme', 'dark');
})();

(function () {
  const stage = document.getElementById('stage');
  const codeOut = document.getElementById('code-out');
  const note = document.getElementById('note-out');

  const notes = {
    'repeat(2, 1fr)': 'Two equal-width columns — 1fr and 1fr split the row 50/50. Items wrap to a new row every 2 items (6 items → 3 rows).',
    'repeat(3, 1fr)': 'Three equal columns. repeat() is just shorthand — this is identical to writing "1fr 1fr 1fr".',
    'repeat(4, 1fr)': 'Four equal columns — with only 6 items, the last row only fills 2 of the 4 columns and leaves the rest empty.',
    '1fr 2fr 1fr': 'Three columns, but not equal — the middle column gets twice the leftover space of the outer two (the same fr ratio logic as flex-grow).',
    '100px 1fr 100px': 'A common "sidebar" pattern: two fixed 100px columns pinned on the edges, with the middle column flexibly filling whatever space is left.',
    '200px 200px 200px': 'Three fixed-width columns — each is exactly 200px no matter what. If the container is wider than 600px, the leftover space just sits unused; if it\u2019s narrower, the grid overflows instead of shrinking, since fixed px values never flex.'
  };

  document.getElementById('col-pills').querySelectorAll('.ha-pill').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.ha-pill').forEach(p => p.classList.remove('ha-on'));
      btn.classList.add('ha-on');
      const val = btn.getAttribute('data-val');

      stage.style.gridTemplateColumns = val;

      codeOut.innerHTML = '<span class="ha-sel">.container</span> {\n  ' +
        '<span class="ha-prop">display</span>: grid;\n  ' +
        '<span class="ha-prop">grid-template-columns</span>: <span class="ha-val-hl">' + val + '</span>;\n  ' +
        '<span class="ha-prop">gap</span>: 10px;\n}';
      note.textContent = notes[val];
    });
  });

  stage.style.gridTemplateColumns = 'repeat(2, 1fr)';
  codeOut.innerHTML = '<span class="ha-sel">.container</span> {\n  ' +
    '<span class="ha-prop">display</span>: grid;\n  ' +
    '<span class="ha-prop">grid-template-columns</span>: <span class="ha-val-hl">repeat(2, 1fr)</span>;\n  ' +
    '<span class="ha-prop">gap</span>: 10px;\n}';
  note.textContent = notes['repeat(2, 1fr)'];
})();
</script>

</body>
</html>

.demo {
  font-family: system-ui, sans-serif;
  padding: 16px;
}

.demo h1 {
  color: #2563eb;
  margin: 0 0 8px;
}

.demo p {
  color: #4b5563;
  margin: 0;
}

document.querySelector('.demo h1')?.addEventListener('click', () => {
  alert('Hello from live preview!');
});

🔹 grid-template-rows

Defines the number of rows and their heights.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Grid Template Rows Playground</title>
<style>
  .infographic-gridrows {
    --ink:        #1a1a1a;
    --ink-soft:   #5c5c5c;
    --paper:      #ffffff;
    --paper-alt:  #f0ece4;
    --accent:     #2563eb;
    --accent-soft:#e3ebfd;
    --line:       #ddd6c9;
    box-sizing: border-box;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    border-radius: 14px;
    overflow: hidden;
  }
  .infographic-gridrows[data-theme="dark"] {
    --ink:        #e8e6e1;
    --ink-soft:   #9a968c;
    --paper:      #121212;
    --paper-alt:  #1e1e26;
    --accent:     #5b8def;
    --accent-soft:#202942;
    --line:       #2c313d;
  }
  .ha-inner { padding: 0.5rem; }
  .ha-layout { display: flex; flex-direction: column; gap: 1.1rem; }

  .ha-code {
    background: #0b0b0b;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
    padding: 0.8rem 1.8rem 0.8rem 0.9rem;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.85rem;
    color: #e5e5e5;
    overflow-x: auto;
    white-space: pre-wrap;
  }
  .ha-code .ha-prop { color: #c586c0; }
  .ha-code .ha-val-hl { color: #ffd166; font-weight: 700; }
  .ha-code .ha-sel { color: #f472b6; font-weight: 700; }

  .ha-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }
  .ha-pill {
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .ha-pill:hover { border-color: var(--accent); }
  .ha-pill.ha-on { background: var(--accent); border-color: var(--accent); color: #fff; }

  .ha-stage-outer {
    background: var(--paper-alt);
    border-radius: 10px;
    padding: 12px;
  }
  .ha-stage {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    box-sizing: border-box;
    height: 320px;
    overflow-y: auto;
  }
  .ha-grid-item {
    background-color: steelblue;
    color: white;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    box-sizing: border-box;
    transition: all 0.35s ease;
  }

  .ha-note {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.78rem;
    color: var(--ink-soft);
  }
</style>
</head>
<body>

<div class="infographic-gridrows" id="ha-root">
  <div class="ha-inner">
    <div class="ha-layout">

      <div class="ha-code" id="code-out"></div>

      <div class="ha-pills" id="row-pills">
        <button class="ha-pill ha-on" data-val="100px 150px">100px 150px</button>
        <button class="ha-pill" data-val="repeat(2, 100px)">repeat(2, 100px)</button>
        <button class="ha-pill" data-val="1fr 1fr">1fr 1fr</button>
        <button class="ha-pill" data-val="auto 1fr">auto 1fr</button>
        <button class="ha-pill" data-val="50px 1fr 50px">50px 1fr 50px</button>
      </div>

      <div class="ha-stage-outer">
        <div class="ha-stage" id="stage">
          <div class="ha-grid-item">1</div>
          <div class="ha-grid-item">2</div>
          <div class="ha-grid-item">3</div>
          <div class="ha-grid-item">4</div>
          <div class="ha-grid-item">5</div>
          <div class="ha-grid-item">6</div>
        </div>
      </div>

      <div class="ha-note" id="note-out"></div>

    </div>
  </div>
</div>

<script>
(function () {
  const wrapper = document.getElementById('ha-root');
  const bodyAttr = document.body.getAttribute('data-darkmode');
  let dark;
  if (bodyAttr === 'true') {
    dark = true;
  } else if (bodyAttr === 'false') {
    dark = false;
  } else {
    const match = document.cookie.match(/(?:^|;\s*)darkMode=([^;]+)/);
    dark = match ? match[1] === 'true' : false;
  }
  if (dark) wrapper.setAttribute('data-theme', 'dark');
})();

(function () {
  const stage = document.getElementById('stage');
  const codeOut = document.getElementById('code-out');
  const note = document.getElementById('note-out');
  const items = Array.from(stage.querySelectorAll('.ha-grid-item'));

  const notes = {
    '100px 150px': 'Only 2 explicit row heights are given (100px, 150px), but there are 6 items in a single column — rows 3 through 6 all fall back to the grid\u2019s implicit row height (auto-sized to content) rather than reusing 100px or 150px.',
    'repeat(2, 100px)': 'Same idea as before, but repeat() makes it explicit: exactly 2 rows of 100px are defined, so rows 3-6 are still implicit/auto.',
    '1fr 1fr': 'Only 2 fr rows are defined, splitting most of the container\u2019s 320px height between rows 1 and 2 — rows 3-6 still fall back to implicit auto-sized rows underneath, likely overflowing the fixed-height container.',
    'auto 1fr': 'Row 1 sizes itself to fit its content (its natural height), row 2 (fr) claims the leftover space in the container, and rows 3-6 — again undefined — are implicit and auto-sized.',
    '50px 1fr 50px': 'Only 3 rows are explicitly defined for 6 items — rows 1-3 follow the "header / content / footer" pattern, then rows 4-6 fall back to implicit auto-sized rows since the template runs out.'
  };

  document.getElementById('row-pills').querySelectorAll('.ha-pill').forEach(btn => {
    btn.addEventListener('click', () => {
      document.querySelectorAll('.ha-pill').forEach(p => p.classList.remove('ha-on'));
      btn.classList.add('ha-on');
      const val = btn.getAttribute('data-val');

      stage.style.gridTemplateRows = val;

      codeOut.innerHTML = '<span class="ha-sel">.container</span> {\n  ' +
        '<span class="ha-prop">display</span>: grid;\n  ' +
        '<span class="ha-prop">grid-template-rows</span>: <span class="ha-val-hl">' + val + '</span>;\n  ' +
        '<span class="ha-prop">gap</span>: 10px;\n}';
      note.textContent = notes[val];
    });
  });

  stage.style.gridTemplateRows = '100px 150px';
  codeOut.innerHTML = '<span class="ha-sel">.container</span> {\n  ' +
    '<span class="ha-prop">display</span>: grid;\n  ' +
    '<span class="ha-prop">grid-template-rows</span>: <span class="ha-val-hl">100px 150px</span>;\n  ' +
    '<span class="ha-prop">gap</span>: 10px;\n}';
  note.textContent = notes['100px 150px'];
})();
</script>

</body>
</html>

.demo {
  font-family: system-ui, sans-serif;
  padding: 16px;
}

.demo h1 {
  color: #2563eb;
  margin: 0 0 8px;
}

.demo p {
  color: #4b5563;
  margin: 0;
}

document.querySelector('.demo h1')?.addEventListener('click', () => {
  alert('Hello from live preview!');
});

🧠 Summary

Property	Purpose
`display: grid;`	Turns an element into a grid container
`grid-template-columns`	Defines number and size of columns
`grid-template-rows`	Defines number and size of rows
`fr`	Creates flexible, proportion-based columns