Animate Grid Reflows with CSS

Build a responsive grid whose tiles slide smoothly as its layout reflows.

Introduction

30 Second Summary

Card layouts often jump abruptly when a browser window gets narrower. The content still fits, but the movement feels broken.

In this project, you will build a responsive CSS Grid whose tiles slide into place as the window narrows. CSS anchor positioning gives each tile a moving target that an ordinary CSS transition follows without JavaScript.

What You'll Build

Your finished page shows tiles gliding between responsive grid positions whenever you drag the window edge.

By the end of this project, you'll have:

A smooth, interruptible grid reflow that reverses direction when your resize does.
A reduced-motion mode that makes every tile move instantly for people who prefer less animation.
A deployed page with a browser fallback that preserves the plain grid when anchor positioning is unavailable.
Secret Mission: Make one featured tile span two cells while preserving smooth reflow.

Are there any prerequisites?

You'll need a text editor plus basic comfort with CSS Grid. A Chromium-based browser is the main test browser because anchor positioning support is uneven across browser engines.

Before We Start

This project uses one HTML file. Your code editor and browser form the complete workspace.

Support for CSS anchor positioning still varies between browser engines. In this step, you will prepare VS Code, Brave, and GitHub so every later check has a dependable home.

In this step, get ready to:

Open a code editor for the single HTML file you build next.
Prepare a Chromium-based browser for responsive testing.
Confirm that your GitHub account is ready for deployment.

Prepare your code editor

VS Code provides syntax highlighting for HTML and CSS. Another code editor works too if you already have one you prefer.

✔️ VS Code is installed

Press Cmd+Space on macOS or the Windows key on Windows to open system search.
Type Visual Studio Code into the search field.
Press Enter to open VS Code.

You should see a VS Code window ready for a folder or file.

ⓧ I need to install VS Code

Choose the tab for your operating system. Each path ends with VS Code installed and open.

macOS

Visit the official Visual Studio Code download page.
Download the macOS .dmg installer.
Open the downloaded .dmg file.
Drag Visual Studio Code into the Applications folder.
Press Cmd+Space to open Spotlight.
Type Visual Studio Code into Spotlight.
Press Enter to open VS Code.

Windows

Visit the official Visual Studio Code download page.
Download the User Installer for your computer.
Run the downloaded installer.
Keep the default installation options.
Press the Windows key to open system search.
Type Visual Studio Code into the search field.
Press Enter to open VS Code.

Linux

Visit the official Visual Studio Code Linux setup guide.
Select the package instructions for your Linux distribution.
Complete the documented package installation steps.
Open your desktop application launcher.
Select Visual Studio Code to open it.

Editor installation blocked?

Use another code editor that is already approved on your computer.
Ask your device administrator to approve the Visual Studio Code installer if your computer is managed.

Describe what happens when you try to install or open the editor with help me troubleshoot my code editor setup.

Prepare a Chromium-based browser

The anchor technique depends on browser support. Brave provides the Chromium-based environment used for the main testing path.

✔️ Brave is installed

Press Cmd+Space on macOS or the Windows key on Windows to open system search.
Type Brave into the search field.
Press Enter to open Brave.

You should see Brave open in a desktop window.

ⓧ I need to install Brave

Your operating system may ask for permission before the installer runs.

Visit the official Brave download page.
Choose the desktop download for your operating system.
Open the downloaded installer or package.
Approve the installation permission request if one appears.
Complete the installation using the default options.
Press Cmd+Space on macOS or the Windows key on Windows to open system search.
Type Brave into the search field.
Press Enter to open Brave.

Make the Brave window narrower by dragging its lower-right corner inward.
Make the Brave window wider by dragging its lower-right corner outward.

You should see the browser respond to both drags. This is the same resizing motion you will use to test the tiles.

Brave will not open?

Confirm that you downloaded Brave from its official website.
Restart the installer if the installation window closed before completion.

Share your operating system and the point where the installer stops with help me troubleshoot my Brave installation.

Confirm your GitHub account

GitHub gives the finished page a place to live when you deploy it later. Account setup uses private credentials, so keep them out of project files and screenshots.

✔️ I have a GitHub account

Visit GitHub in Brave.
Sign in using your existing account.
Complete any authentication prompt for your account.

You should see your signed-in personal GitHub dashboard.

ⓧ I need a GitHub account

Visit the official GitHub sign-up page in Brave.
Follow the prompts to create a personal account.
Verify your email address using the message GitHub sends you.
Return to GitHub after verification.

You should see your signed-in personal GitHub dashboard.

Before the final check, consider which open screen should confirm each part of your setup.

Confirm that your code editor is open.
Confirm that Brave is open in a resizable desktop window.
Confirm that your GitHub personal dashboard is visible in Brave.

You should now have an open editor, a resizable Chromium-based browser, and access to your GitHub account.

Your workspace is ready for the full project. Next, you will build the plain CSS grid and watch its tiles jump during a resize.

Build the Responsive Tile Grid

Responsive layouts have to reorganize their content when the available space changes. This step creates the baseline behavior that the rest of the project builds on.

A standalone HTML page keeps every part of the demo in one file. CSS Grid decides how many tile columns fit at each browser width.

In this step, get ready to:

Create a standalone page containing six tile elements.
Turn the tiles into a responsive grid that changes its column count.
Resize the browser to observe how ordinary grid reflow behaves.

Create the standalone tile page

The first version needs a clear set of tiles before it can respond to different widths. Each tile stays in normal document flow so the browser controls its position.

Use Finder on macOS or File Explorer on Windows to create a sliding-tile-grid folder on your Desktop.
Use the folder picker in your open editor to select the sliding-tile-grid folder.

You should see sliding-tile-grid as the active folder in your editor's file sidebar.

Use your editor's file controls to create index.html inside the sliding-tile-grid folder.

You should see the empty index.html file in the editor sidebar.

Fill index.html by pasting the code below:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Tile Grid</title>
  <style>
    /* Keep the page readable while the grid changes shape. */
    * { box-sizing: border-box; }
    body { margin: 0; min-height: 100vh; padding: 32px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1f2330; }
  </style>
</head>
<body>
  <h1>Responsive Tile Grid</h1>
  <!-- These tiles remain ordinary in-flow grid items. -->
  <div class="tile-grid">
    <article class="tile">One</article>
    <article class="tile">Two</article>
    <article class="tile">Three</article>
    <article class="tile">Four</article>
    <article class="tile">Five</article>
    <article class="tile">Six</article>
  </div>
</body>
</html>

What does this code do?

The viewport setting makes the page width match the browser width.
The body rule supplies readable spacing plus a neutral page background.
The six article elements provide the visible content that the grid places.

Save index.html.
Return to the sliding-tile-grid folder in Finder on macOS or File Explorer on Windows.
Double-click index.html to load the local page in your browser.

You should see the heading followed by six plain tile labels. The labels still follow normal document flow.

Page not loading?

Confirm that index.html is saved inside the sliding-tile-grid folder.
Check that the file name ends with .html.

Help me find why my local HTML page does not open in the browser.

Make the grid responsive

A responsive grid needs a rule for deciding when another column can fit. Flexible tracks let that decision follow the browser width without a fixed list of breakpoints.

Place the responsive grid rules below the body rule inside the style element by pasting this code:

.tile-grid {
  /* Let available width decide how many columns fit. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  max-width: 960px;
  margin: 24px auto 0;
}

How does the responsive grid work?

The display: grid declaration turns the tile container into a grid.
The repeat(auto-fit, minmax(180px, 1fr)) value creates as many columns as the available width can hold.
Each column stays at least 180px wide before the browser moves a tile into another row.
The max-width value keeps the grid from stretching across an extra-wide screen.

Save index.html.
Refresh the local page in your browser.

You should see the six labels arranged across several columns. Their exact column count depends on the current browser width.

Still seeing one long column?

Confirm that the .tile-grid block sits inside the style element.
Check that class="tile-grid" still appears on the element surrounding all six tiles.

Help me troubleshoot why my tile-grid CSS is not creating columns.

The responsive structure is working. Clear tile styling makes each change in position easier to follow during the resize test.

Place the tile rules below the .tile-grid block by pasting this code:

.tile {
  /* Give every in-flow grid item a clear visual boundary. */
  display: grid;
  min-height: 120px;
  place-items: center;
  border: 1px solid #d8dbe2;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgb(31 35 48 / 8%);
  font-size: 1.25rem;
  font-weight: 700;
}

What styles the tiles?

The internal grid centers each tile label.
The minimum height gives every tile enough area for its movement to remain visible.
The border plus shadow separates each tile from the page background.

Save index.html.
Refresh the local page in your browser.

You should see six white tiles with rounded corners. Each tile has a centered number word.

Tiles still look like plain text?

Confirm that the .tile block appears before the closing style tag.
Check that every tile element still uses class="tile".

Help me find why my tile styles are not appearing.

✔️ Awesome, I've got everything!

Great. Make sure index.html is saved before testing the reflow.

ⓧ I'd like to double check the full code

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Tile Grid</title>
  <style>
    /* Keep the page readable while the grid changes shape. */
    * { box-sizing: border-box; }
    body { margin: 0; min-height: 100vh; padding: 32px; font-family: system-ui, sans-serif; background: #f4f5f7; color: #1f2330; }

    .tile-grid {
      /* Let available width decide how many columns fit. */
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 16px;
      max-width: 960px;
      margin: 24px auto 0;
    }

    .tile {
      /* Give every in-flow grid item a clear visual boundary. */
      display: grid;
      min-height: 120px;
      place-items: center;
      border: 1px solid #d8dbe2;
      border-radius: 16px;
      background: #ffffff;
      box-shadow: 0 8px 24px rgb(31 35 48 / 8%);
      font-size: 1.25rem;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <h1>Responsive Tile Grid</h1>
  <!-- These tiles remain ordinary in-flow grid items. -->
  <div class="tile-grid">
    <article class="tile">One</article>
    <article class="tile">Two</article>
    <article class="tile">Three</article>
    <article class="tile">Four</article>
    <article class="tile">Five</article>
    <article class="tile">Six</article>
  </div>
</body>
</html>

How to use this reference

This reference combines the page structure with both CSS rule blocks. Compare it with your saved file to find any missing selector or closing tag.

Test the grid reflow

Before you resize the browser, where do you expect the tile labeled Six to move when its current row no longer has enough space?

Switch back to the local page from earlier.
Widen the browser window until the tiles fill several columns.
Drag the browser's right edge slowly toward the center of the screen.
Drag the browser's right edge slowly outward again.

You should see the column count decrease while the window narrows. The tiles jump immediately into their newly calculated rows.

When the window widens again, the columns return. The tiles jump back to their new positions with no intermediate movement.

Why do the tiles jump?

CSS Grid recalculates placement when another column no longer fits. Each ordinary grid item appears in its newly resolved cell immediately.

That abrupt movement is the intended baseline for this step. You now have a clear behavior to compare against as the project develops.

Your responsive grid now reflows across different browser widths. Next, you will separate the visible tiles from their grid cells while preserving this exact layout.

Anchor Tiles to Grid Cells

Your responsive CSS Grid already exposes the problem. Changing the column count makes each tile jump to its next position.

This step changes the positioning architecture with CSS anchor positioning. Each grid cell becomes a named reference for one tile. The page keeps the same appearance.

In this step, get ready to:

Give every grid cell a unique anchor name.
Position each tile against its matching grid cell.
Confirm the responsive layout remains visually identical.

Assign unique anchors to the cells

An anchor name turns an existing grid cell into a positioning reference. Unique names keep every tile tied to one destination.

Switch back to index.html in the code editor from the previous step.
Locate the existing elements that act as grid cells.
Assign a different CSS anchor name declaration to each grid cell.
Save index.html.
Return to the local page from the previous step.
Refresh the browser.

The page should look identical because naming a grid cell does not alter its normal placement.

Why must every anchor name be unique?

A tile resolves its position from the anchor name it references. Duplicate names can make multiple tiles resolve to one cell.

Those tiles can then stack. One unique name per cell preserves the one-to-one relationship.

Position each tile against its anchor

The grid cells remain responsible for the responsive layout. Each tile now reads its position from the matching cell instead of occupying that grid position directly.

Locate the existing CSS rules for the tile elements in index.html.
Update each tile so it uses its matching cell's unique anchor as the positioning reference for all four edges.
Save index.html.
Return to the local page.
Refresh the browser.

Every tile should still fill its original grid cell. The responsive grid should retain its original appearance.

What changed under the surface?

The grid cells stay in normal document flow. They continue to control the responsive track sizing.

Each tile now uses a named cell as its positioning reference. No transition is present yet, so repositioning remains instant.

Verify the anchored reflow

Visual parity is the goal for this step. A computed-position check confirms that the unchanged appearance now comes from anchors.

Inspect one tile with your browser's developer tools.
Check that the inspected tile resolves against the unique anchor name on its corresponding grid cell.

This confirms that the layout is anchor-driven even though its appearance matches the original grid.

Before you resize the page, do you expect the column count to change even though the tiles now use anchor positioning?

Slowly narrow the browser window.
Stop when the grid changes to fewer columns.

You should see the grid reflow into fewer columns at the same point as before. Every tile remains aligned with its matching cell.

The repositioning is still instant because no transition exists in index.html.

Tiles misaligned or stacked?

Check that every grid cell has a different anchor name.
Compare each tile's anchor reference with the name on its corresponding cell.
Restore any responsive column rules that changed during the edit.

Help me fix tiles that are misaligned or stacked after adding CSS anchor positioning.

That careful refactor paid off. Your tiles now follow named grid cells without changing the layout. Next, you'll add the transition that makes each repositioning visible.

Animate the Anchored Reflow

Your responsive grid now uses CSS anchor positioning to follow each cell. The tiles still jump because their resolved positions update instantly.

A CSS transition lets the browser interpolate those resolved positions over time. In this step, you will apply that transition to inset so each tile travels to its next cell.

In this step, get ready to:

Add an ordinary transition to the anchor-driven tile positions.
Resize the browser to confirm the tiles slide between grid cells.

Add the transition

The tile rule already receives new inset values from its anchor. Targeting that property makes the browser draw the positions between the old cell and the new cell.

Locate each tile's position-anchor declaration in index.html from earlier.
Add this declaration inside the same CSS rule:

transition: inset 0.2s ease;

What does this line do?

The inset value represents the tile's anchor-resolved position.
The 0.2s duration keeps the movement visible without making the layout feel slow.
The ease timing function softens the start and finish of the movement.

Save index.html.
Reload the local page in your browser.

You should see the same aligned tiles at the current width. This proves the transition changed the journey between cells without changing the destination.

Test the sliding reflow

Before you drag the window edge, do you expect the anchored tiles to teleport or travel between cells?

Switch back to the browser preview from earlier.
Resize the browser slowly until the grid changes its column count.

You should see every tile slide toward its newly assigned cell. The tile order and final alignment should remain unchanged.

There it is. Your anchored tiles now travel between responsive positions while the grid continues choosing each destination.

Tiles still jumping?

Confirm that transition sits inside the CSS rule for the anchor-positioned tiles.
Check that the transition targets inset. A transition on grid placement still produces an instant reflow.
Save index.html before reloading the local page.

Help me find why my anchored tiles still jump during responsive reflow.

Your responsive reflow now slides instead of jumping. Next, you will test how that movement responds when the layout changes again before the transition finishes.

Test Interrupted Resize Motion

Your CSS Grid now reflows with tiles that slide into their new cells. You have already proved that the anchor-driven animation works during a complete resize.

CSS anchor positioning gives each tile a new target whenever the grid reflows. A window resize can reverse before the CSS transition finishes.

This test reveals how each tile responds when its anchor target changes mid-motion.

In this step, get ready to:

Set up enough window travel to make the animation easy to interrupt.
Test the tiles during a mid-motion resize reversal.

Set up a slow resize

Catching the reversal is slightly fiddly because the transition is brief. A slow drag gives you enough time to change direction while the tiles are moving.

Return to the local page in the browser from earlier.
Drag the browser's side edge outward until the grid reaches its wider layout.

You should see the tiles settled into the wider arrangement. This gives them room to travel during the interruption test.

Reverse the resize mid-motion

Drag the browser's side edge inward slowly until the tiles start moving toward the narrower layout.

Before you reverse the resize, where do you expect each tile's return journey to begin? Do you think it begins from the tile's current position or from a completed grid cell?

Drag the same edge outward before the tiles settle.

You should see each tile change direction from its current position. No tile should snap to either grid cell first.

Repeat the mid-motion reversal two more times.

Each reversal should begin wherever the tile is currently rendered. The motion should remain smooth through every direction change.

You nailed the timing. Your tiles now change direction from their current positions without snapping.

Why Does the Reversal Stay Smooth?

The transition continuously calculates positions between each tile's current location and its active anchor target. Changing the target during that movement starts a new journey from the position already on screen.

This makes the animation interruptible. The layout responds to your latest resize movement without finishing an outdated path first.

Seeing a Snap During Reversal?

Start from a wider browser window if the tiles settle before you can reverse the drag.
Move the window edge more slowly as the grid changes column count.
Confirm that the transition from the previous step is still present in index.html if the first resize also jumps.

Help me diagnose a tile that snaps during an interrupted resize.

Your animation now holds up when a resize changes direction. Next, you will make that motion adapt to viewer preferences.

Respect Reduced Motion Settings

The tiles now stay fluid when you reverse a resize halfway through. That proves the transition can react to a moving target.

Some visitors set a reduced motion preference to minimize non-essential movement. This step lets their browser turn the tile transition off.

The responsive layout still works. Each tile simply moves to its next cell instantly.

In this step, get ready to:

Add a reduced motion override to the tile transition.
Emulate a reduced motion preference in the browser.
Verify that the tiles reflow instantly.

Add the reduced motion override

A CSS media query can respond to a preference reported by the browser. The prefers-reduced-motion feature gives your tile transition a reduced-motion path.

Switch back to index.html in your editor.
Locate the tile selector that contains the existing transition declaration.
Add the complete reduced-motion override immediately above </style> using @media (prefers-reduced-motion: reduce) around the exact existing tile selector with transition set to none.
Save index.html.
Switch back to the local page from earlier.
Reload the page.
Resize the browser across the same responsive breakpoint.

Your normal-motion animation should still slide the tiles between cells. That confirms the override stays scoped to the reduced motion preference.

How does the override work?

The reduce value becomes active when the browser reports a reduced motion preference. The later tile rule then overrides the normal transition.

The none value removes the tile transition. The same grid breakpoints still choose each tile's destination.

Did the tiles start jumping already?

Check that the transition value of none sits inside the @media (prefers-reduced-motion: reduce) block. A missing closing brace can let the override apply all the time.
Confirm that the copied tile selector matches the existing tile selector exactly.

Help me find why my reduced motion CSS override is affecting normal motion.

Emulate a reduced motion preference

Chrome DevTools can emulate the preference for the current page. This gives your CSS the same reduced motion signal without changing your computer settings.

Open Chrome DevTools by pressing Cmd+Option+I on macOS or Ctrl+Shift+I on Windows.
Open the Command Menu by pressing Cmd+Shift+P on macOS or Ctrl+Shift+P on Windows.
Type rendering into the Command Menu.
Select Show Rendering.
Find Emulate CSS media feature prefers-reduced-motion in the Rendering tab.
Select prefers-reduced-motion:reduce from the dropdown.

Chrome now reports a reduced motion preference to your page. Your new media query is active.

Verify the instant reflow

Before you test, do you expect the tiles to glide between cells or appear directly in their new positions?

Reload the page by pressing Cmd+R on macOS or Ctrl+R on Windows.
Resize the browser slowly across a responsive breakpoint.

You should see the tiles move instantly to their new cells. The grid remains responsive without playing the sliding transition.

That is the accessible path working. Your page now follows the visitor's motion preference without sacrificing the layout.

Do the tiles still slide?

Confirm that the Rendering dropdown shows prefers-reduced-motion:reduce.
Check that the reduced motion rule appears after the normal tile transition rule in index.html.
Verify that both rules use the exact same tile selector.

Help me troubleshoot why my tiles still animate with reduced motion enabled.

Your grid now respects visitors who request less motion. Next, you will deploy the page and confirm that unsupported browsers receive a usable fallback.

Deploy the Grid with a Fallback

Your reduced-motion path already protects people who request less animation. One gap remains for browsers that cannot use CSS anchor positioning.

Those browsers need a plain CSS Grid layout they can render on their own. This baseline keeps every tile visible.

A CSS feature query lets the sliding rules activate only when the browser supports them. You will publish both layout paths through GitHub Pages.

In this step, get ready to:

Build a usable plain-grid fallback for browsers without CSS anchor positioning.
Publish the finished page from a GitHub repository.
Test both deployed layout paths.

Put the fallback first

The normal grid flow gives every browser a dependable layout. Supported browsers can layer the anchored movement on top of that baseline.

Return to the reduced-motion setting from the previous step.
Turn reduced motion off.
Reload your local page in the supporting browser.
Drag the window edge slowly.

You should see the tiles slide between their responsive positions. This confirms the supported path still works before you reorganize the CSS.

Edit the default tile rules in index.html so every tile participates in the responsive grid's normal flow.
Save index.html.

Before you test the fallback, do you expect the tiles to overlap or form a normal responsive grid?

Open the local page in a browser without CSS anchor positioning support.
Drag the window edge to make the viewport narrower.

You should see a usable grid that changes column count. The tiles should stay in flow without overlapping or disappearing.

Why the fallback works

An unsupported browser can still understand the ordinary grid declarations. It ignores the anchor positioning features it does not support.

The feature query keeps those advanced declarations together. This makes the plain grid the dependable starting point.

Wrap the existing unique anchor names, anchored tile positioning, and ordinary CSS transition in one CSS feature query that checks for CSS anchor positioning support.
Save index.html.

Before you reload the supporting browser, do you expect this refactor to change the layout or preserve the sliding behavior?

Return to the supporting browser.
Refresh the local page.
Drag the window edge slowly.

You should see the same responsive layout as before. The tiles should still slide because the browser activates the supported path.

Seeing a broken layout path?

Check that the default tile rules leave every tile in normal grid flow.
Confirm that every existing anchor-specific declaration is inside the same feature query.
Keep the reduced-motion media query after the supported transition so it can still disable movement when requested.

Help me check why my CSS anchor positioning feature query breaks either the sliding layout or the plain-grid fallback.

Publish with GitHub Pages

A GitHub repository stores the finished index.html. GitHub Pages serves that static file without a build step.

Open GitHub in your browser.
Sign in to your account if prompted.
Select the plus sign in the upper-right corner.
Click New repository.

The repository form controls where the project lives. It also controls whether the deployed site can be shared publicly.

Use the Owner dropdown menu to select your personal account.
Enter your repository name in the Repository name field.

The form now identifies the account that owns your grid project. It also shows the repository name that appears in its URL.

Use the Choose visibility dropdown menu to select Public.
Toggle Add README to On.

The repository is ready to receive the page. The README creates the initial main branch that GitHub Pages can publish.

Click Create repository.

Good work. Your project now has a public repository ready for the finished page.

Switch back to index.html in your code editor.
Press Cmd+A on macOS or Ctrl+A on Windows to select the full file.
Press Cmd+C on macOS or Ctrl+C on Windows to copy it.

The complete page is now on your clipboard. The next actions add that exact file to the repository.

Return to the repository page.
Select the Add file menu above the file list.
Click Create new file.
Enter index.html in the file name field.
Paste the copied page into the file editor with Cmd+V on macOS or Ctrl+V on Windows.

The GitHub editor should now contain the complete responsive tile page. The first line should match the first line in your local index.html.

Click Commit changes.
Keep the option to commit directly to the main branch.

The commit dialog now points to the branch that GitHub Pages will publish.

Click Commit changes in the dialog.

You should return to the repository file list. It should now include index.html.

Click Settings under the repository name.
Click Pages in the sidebar.
Select Deploy from a branch under Source.

GitHub now shows the branch controls for the publishing source. These controls decide which files become the live site.

Select main in the branch dropdown menu.
Select / (root) in the folder dropdown menu.

The publishing source now points to the location that contains index.html.

Click Save.

The first deployment can remain in a building state for a short time. GitHub Pages is processing the repository while you wait.

Refresh the Pages settings until GitHub shows the published site URL.
Record the published address here: your GitHub Pages URL.
Open your GitHub Pages URL in the supporting browser.

You should see the same grid that you tested locally. Your single HTML file is now available from a public URL.

Is the deployed page missing?

Confirm that index.html appears at the top level of the main branch.
Check that the Pages source uses the main branch.
Check that the Pages folder uses / (root).

Help me troubleshoot why my GitHub Pages deployment does not show the index.html page from the main branch root.

Test both layout paths

The deployed URL must prove two outcomes. A supporting browser should slide the tiles while an unsupported browser should preserve the plain grid.

Before you resize the supporting browser, do you expect a slow drag to preserve the interruptible movement from your local page?

Drag the supporting browser's window edge slowly.
Reverse the drag while the tiles are still moving.

You should see the tiles travel to their new cells. A mid-movement reversal should change their direction without a snap.

Before you check the unsupported browser, do you expect missing tiles or a complete grid that reflows instantly?

Open your GitHub Pages URL in a browser without CSS anchor positioning support.
Drag the unsupported browser's window edge to make the viewport narrower.

You should see every tile remain in a usable responsive grid. The tiles should move instantly because this browser keeps the default in-flow layout.

Does one browser fail the test?

Turn reduced motion off before checking the sliding behavior in the supporting browser.
Confirm that the feature query contains the complete anchor-positioned path if the supported browser still jumps.
Confirm that the default tile rules keep tiles in normal grid flow if the unsupported browser shows overlaps.

Help me compare why my deployed grid slides in one browser but becomes unusable in a browser without CSS anchor positioning.

You closed the compatibility gap. Your deployed grid now slides where anchor positioning is supported while remaining usable everywhere else.

Secret mission

Build a Browser Compatibility Test Matrix

Turn your deployed page into a repeatable browser compatibility test. Check normal resizing in the supporting browser. Test an interrupted resize. Finish with reduced motion and the unsupported-browser path.

Clean Up Your Resources

Choose one cleanup path: keep the project available, pause local work, or delete it entirely. This project has no ongoing cost because its GitHub Pages deployment serves a static page.

Resources you used:

The local index.html file in your code editor.
The GitHub repository containing index.html. This includes its GitHub Pages deployment.

Keep everything running

No action is needed. Choose this if you want the published demo available for future use.

Leave index.html in your code editor for future edits.
Leave the GitHub repository in place.
Leave GitHub Pages enabled so the deployed URL stays available.

Pause - I'll come back to this later

Pause your local work without deleting anything.

Save index.html in the code editor.
Close your code editor.
Close any browser tab showing the deployed page.

Your GitHub Pages URL stays live because the deployment remains enabled.

Delete - I don't want to use this again

Deletion is permanent. This cleanup stays short because the project has only two pieces to remove.

Switch back to the code editor from earlier.
Delete index.html with your editor's file deletion control.
Confirm that index.html no longer appears in the editor's file list.

What happens to the live page?

The GitHub Pages deployment depends on the repository from earlier. Deleting that repository removes the source for the published page.

Return to the GitHub repository from earlier.
Open the repository settings page.
Find the permanent repository deletion area on that page.
Use the permanent repository deletion control.
Complete GitHub's confirmation prompt.
Return to your GitHub repositories list.
Confirm that the project repository no longer appears.

Nice Work!

You did it! Your deployed tile grid now glides into each responsive position as the browser window changes size.

What you learned:

Built a responsive CSS Grid whose column count changes as the viewport narrows. Observed how plain grid placement makes tiles jump between cells.
Assigned unique anchor names to grid cells with CSS anchor positioning. Positioned each tile against its matching anchor while preserving the original layout.
Added interruptible CSS transitions that reverse smoothly during a mid-resize direction change. Added a reduced-motion path that restores instant movement. Published the page with GitHub Pages. Confirmed the plain-grid fallback in a browser without anchor positioning support.
Secret Mission: Completed the optional challenge to extend the anchored tile pattern beyond the core build.

Ready to quiz yourself?