Course contentsCSS Grid · 16 topics

CSS Foundations

CSS Introduction Selectors and Relationships Cascade, Specificity, and Inheritance Values, Units, and Color

Layout Systems

The Box Model and Sizing Normal Flow, Display, and Positioning Flexbox CSS Grid

Applied CSS Systems

Backgrounds, Borders, and Visual Layers Interactive States and Pseudo-elements Overflow, Stacking Contexts, and Layering Transforms, Transitions, and Animation CSS Architecture, Components, and Maintenance

Responsive and Responsible CSS

Responsive Design and Container Queries Typography and Rhythm Motion, Focus, and Accessibility

CSS 69 min

CSS Grid

Create two-dimensional layouts with explicit tracks, auto placement, and resilient minimums.

Grid controls rows and columns together. Track functions define available space, minmax() protects useful minimums, and auto-fit can create responsive card layouts without a breakpoint for every device width.

See the core pattern

Read this rule set from the outside in. Identify the inputs, the decision or transformation, and the result before changing it.

.course-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem;
}
/* Add multi-column spans only when the layout has enough tracks. */

Working rules

Use minmax(0, 1fr) when content causes track overflow
Name important page regions when it improves clarity
Let auto placement handle regular collections

A common mistake

A minimum such as 320px can still overflow a 280px viewport. Wrap it with min(100%, 20rem).

Guided practice

Choose the function that repeats as many tracks as fit while collapsing unused ones.

Copy the example into the editable notebook below.
Change one thing at a time and keep the program or rule valid.
Explain the result in one sentence without relying on jargon.

CSS Grid Tutorial | SovranCode

CSS DEEP DIVE · ABOUT 35 MIN

Create a resilient course catalog

Read the explanation, predict the visual result, then edit and run a complete example. Finish with a repair, an independent build, and a knowledge check.

Tracks share a layout contract

Grid creates shared rows and columns, so items can align across both dimensions. An fr unit distributes available track space; it is not a fixed percentage of the entire container before gaps. A bare 1fr track has an automatic minimum, which can be affected by long content. minmax(0, 1fr) is useful when a track must be permitted to shrink, but the content still needs a wrapping or overflow policy. The browser's Grid overlay makes tracks and gaps visible, helping separate a track-sizing problem from a child-size problem.

Responsive repetition still needs safe minimums

repeat(auto-fit, ...) creates as many tracks as fit and collapses unused tracks, allowing occupied tracks to grow. auto-fill preserves empty tracks. A fixed minimum can still overflow when the container is narrower than that minimum; min(100%, 16rem) caps it at the available width. Be careful with grid-column: span 2 on a one-column layout because it can create an implicit extra track. Enable wide spans only when enough columns exist. Keep meaningful source order even when explicit placement could create a visually clever arrangement.

Repair a grid that overflows its parent

Predict the difference, then compare the rendered boxes. Both versions use the same HTML.

Before repair

.grid { display:grid; width:240px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:8px; }

After repair

.grid { display:grid; width:240px; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:8px; }

Before: the minimum track is wider than the 240px parent. After: min(100%,320px) caps the minimum at the available width. Both cards fit in one column without clipping their text.

Inspect the shared HTML

<div class="grid"><div class="tile">HTML</div><div class="tile">CSS</div></div>

Apply the repair in the saved editor below, then test a narrower width and longer content.

Remove two cards and compare auto-fit with auto-fill in a wide window. Inspect the empty tracks with the Grid overlay.

Saved CSS practice

Edit the CSS inside the style element. Account work syncs; guest work stays on this device.

Code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
body { font: 1rem/1.6 system-ui; margin: 0; padding: 1rem; }
.catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.catalog article { min-width: 0; overflow-wrap: anywhere; padding: 1.5rem; border: 2px solid #254fc0; }
h1, h2 { font-size: 1.5rem; }
</style>
</head>
<body>
<main class="catalog"><article><h1>HTML foundations</h1><p>Structure a meaningful document.</p></article><article><h2>CSS layouts</h2><p>Arrange flexible components.</p></article><article><h2>Accessible interfaces</h2><p>Build for different ways of using the web.</p></article></main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
body { font: 1rem/1.6 system-ui; margin: 0; padding: 1rem; }
.catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.catalog article { min-width: 0; overflow-wrap: anywhere; padding: 1.5rem; border: 2px solid #254fc0; }
h1, h2 { font-size: 1.5rem; }
</style>
</head>
<body>
<main class="catalog"><article><h1>HTML foundations</h1><p>Structure a meaningful document.</p></article><article><h2>CSS layouts</h2><p>Arrange flexible components.</p></article><article><h2>Accessible interfaces</h2><p>Build for different ways of using the web.</p></article></main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Run in new window

Loading saved work…

Edit the CSS inside the style element and compare the result in the live preview. Your work saves automatically; you can also download a local copy.

DEBUGGING CHALLENGE

Find the faulty assumption

Explain the problem and write your repair before opening the solution.

.catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

Reveal repair and explanation

.catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

A 320px minimum cannot fit inside a 280px container. Capping that minimum at 100% permits a single track to fit.

INDEPENDENT LAB

Build it without copying

Create a card catalog that moves from one to several columns without device-specific breakpoints. Test one, three, and seven cards.

Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Create a resilient course catalog lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Create a resilient course catalog</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Create a resilient course catalog lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Create a resilient course catalog</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Self-review checklist

The catalog does not overflow a 280px containing block.You can explain the difference between auto-fit and auto-fill.Long content remains readable and no unconditional two-column span creates an extra track.

What did you test and change?

Loading saved work…

This lab is saved separately from the worked example. The checklist is a self-review, not an automatic grade.

CSS knowledge check

Answer both questions correctly to pass this lesson check. Account scores are recomputed on the server. This is a learning check, not certification.

1. Which repetition keyword collapses unused tracks?auto-fillauto-fitspan

2. Why use minmax(0, 1fr) instead of 1fr in a constrained layout?To remove the automatic content-based minimumTo disable all wrappingTo make every item absolute

Loading saved work…