Grid布局中右侧元素左移调整：避免页面整体偏移的解决方法

Hey there! Let's break down why your page is shifting when you adjust that red text box, and fix it up properly.

The Root Cause #

Your .explicationPage uses a grid layout with grid-template-columns: auto 36% auto. The rightmost auto column will automatically expand to fit the width of its content (your red .Desccaptwo box). When you add margin-right to .Desccaptwo, that margin gets counted towards the column's total width—pushing the grid container beyond the viewport width. This triggers horizontal scrolling, making it look like the whole page shifted left.

Fix Options #

Here are a few straightforward solutions, ordered by simplicity:

Option 1: Use transform instead of margin-right

This is the quickest fix because transform shifts the element visually without altering its "footprint" in the layout. The grid column won't expand, so your page stays put:

.Desccaptwo{
  /* Remove margin-right: 35%; */
  transform: translateX(-35%); /* Shifts the element left by 35% of its own width */
  /* Keep your other styles */
  justify-self: center;
  grid-column: 3/3;
  grid-row: 2/2;
  width: 100%;
  font-size: 126%;
  margin-top: 2.4%;
  text-shadow: 4px 4px 13px black;
  background: red;
}

Option 2: Refactor your grid columns with fr units

Replace the auto columns with 1fr to make the left/right columns split the remaining viewport space evenly. This locks their width, so adding margins to .Desccaptwo won't break the page:

/* Update the grid container */
.explicationPage{
  display: grid;
  grid-template-columns: 1fr 36% 1fr; /* Swap auto for 1fr */
  grid-template-rows: auto auto auto;
  height: 100vh;
}

/* Adjust the red box's alignment */
.Desccaptwo{
  justify-self: start; /* Align to the left edge of its grid column */
  margin-right: 35%; /* Now this only moves the box within its column */
  /* Keep other styles */
}

Option 3: Restrict the box's width

If you prefer to keep the auto columns, limit .Desccaptwo's width to prevent it from expanding the grid:

.Desccaptwo{
  max-width: calc(100% - 35%); /* Cut 35% off the box's width */
  margin-left: auto; /* Push the box to the right edge of its column */
  /* Remove margin-right: 35%; */
  /* Keep other styles */
}

Bonus: Clean Up Duplicate Code #

You’ve got identical CSS rules inside and outside your media query. You can simplify this by keeping base styles outside the query, and only overriding changes for larger screens:

/* Base styles (applies to all screen sizes) */
.Blogtwos{ background:rgb(48, 150, 28); } 
.explicationPage{ display: grid; grid-template-columns: 1fr 36% 1fr; grid-template-rows: auto auto auto; height: 100vh; } 
.ImageBlogB{ grid-column: 2/3; grid-row: 2/2; display: grid; } 
.ImageBlogB > img{ max-width: 52%; min-width: 52%; margin-top: 15%; justify-self: center; } 
.Desccapone{ grid-column: 2/3; grid-row: 1/1; margin-top: 2.8%; justify-self: center; } 
.desccaptionB{ grid-column: 1/1; grid-row: 2/2; width: 100%; font-size: 126%; margin-top: 12.4%; margin-left: 13%; text-shadow: 4px 4px 13px black; } 
.Desccaptwo{ justify-self: center; grid-column: 3/3; grid-row: 2/2; width: 100%; font-size: 126%; margin-top: 2.4%; text-shadow: 4px 4px 13px black; background: red; } 

/* Large screen overrides */
@media (min-width: 1024px) { 
  * { margin: 0; padding: 0; border: 0; } 
  ::-webkit-scrollbar{ display: none; } 
  .ImageBlogB > img{ max-width: 56%; min-width: 56%; } 
  .Desccaptwo{ transform: translateX(-35%); } /* Apply the shift here */
}

内容的提问来源于stack exchange，提问作者user15626952