使用百分比grid-template-columns时，如何让Div2在1000px时下移至Div1下方

我正在制作响应式网站，之前使用grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))可轻松实现div换行，但现在改用百分比设置grid-template-columns:90% 40%后，希望屏幕宽度达到1000px时，让grid容器下的div2移动到div1下方。

网格容器CSS #

.LOR_s2-gridContainer{
    /* background-color: rgb(177, 130, 130); */
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */
    grid-template-columns: 90% 40%;
    /* grid-auto-rows: 755px; */
    margin-top: 90px;
    width: 70%;
    margin-left: 240px;
    gap: 20px;
}

网格项CSS #

.LOR_s2-gridDiv1{
    /* background-color: rgb(114, 178, 87); */
    width: 75%;
}
.LOR_s2-gridDiv2{
    /* background-color: rgb(39, 64, 85); */
    width: 80%;
    margin-left: -210px;
}

主JSX代码 #

<>
      <div className="LOR_s2-mainContainer">
        <div className="LOR_s2-gridContainer">
          <div className="LOR_s2-gridDiv1">
            <div className="LOR_s2-gridDiv1-imgDiv">
              <img className="LOR_s2-gridDiv1-img" src={img1} alt="" />
            </div>
            <div className="LOR_s2-gridDiv1-Head">
              LOR: Letter Of Recommendation
            </div>
            <div className="LOR_s2-gridDiv1-Text">
              Letter of Recommendation acts as an aide to your Statement of
              Purpose. It supports your Statement of Purpose by insights into
              your performance, projects, and personality. The Letter of
              Recommendation is signed and validated by your teachers,
              professors, mentors, and managers. Letter of Recommendation is
              both for <b>Educational</b> and <b>Professional </b> Professional
              Reasons. Correct recommendations lead to strengthening your
              application. The LoR has to correctly state your performance,
              accomplishments, and strengths in a way that does justice to your
              actual performance. We draft professional LoRs to highlight your
              mettle.
            </div>
            <div className="LOR_s2-gridDiv1-Text">
              Teachers often are unable to articulate the feats of the student.
              Also, the sources are not justified at times to validate the
              content.
            </div>
            <div className="LOR_s2-gridDiv1-head-Text">
              Educational Letter of Recommendation
            </div>
            <div className="LOR_s2-gridDiv1-Text">
              It is drafted to apply to educational institutions. An Educational
              LoR involves getting recommendations signed by teachers in school
              and professors in college. You need to decide which feats would
              strengthen your application and are worthy to be included in the
              LoR.
              <br />
              <b>Rates: ₹1000/- | US$ 15.00</b> View Sample
            </div>
            <div className="LOR_s2-gridDiv1-head-Text">
              Professional Letter of Recommendation
            </div>
            <div className="LOR_s2-gridDiv1-Text">
              A professional LoR is drafted to gain a better position in your
              professional tenure or shift jobs. It involves highlighting
              achievements that do justice to the job profile that you are
              applying to.
              <br />
              <b>Rates: ₹1000/- | US$ 15.00 </b> View Sample
            </div>
          </div>
          <div className="LOR_s2-gridDiv2">
            <div className="LOR_s2-gridDiv2-mainContainer">
              <div className="LOR_s2-gridDiv2-mainContainer-headContainer">
                <div className="LOR_s2-gridDiv2-mainContainer-head">
                  Apply Now
                </div>
                <div className="LOR_s2-gridDiv2-mainContainer-Text">
                  Please fill all your information correctly to get an idea
                  about your proper requirement.
                </div>
                <div className="LOR_s2-gridDiv2-mainContainer-Text">
                  Chose from the below buttons to choose your LOR type Academic
                  or Professional
                </div>
                <div className="LOR_s2-gridDiv2-mainContainer-button">
                  <div className="LOR_s2-gridDiv2-mainContainer-button-span1">
                    Academic
                  </div>
                  <div className="LOR_s2-gridDiv2-mainContainer-button-span2">
                    Professional
                  </div>
                  {/* <div className="LOR_s2-gridDiv2-mainContainer-button-span3">
                    OR
                  </div> */}
                </div>
              </div>
            </div>
            <div className="LOR_s2-gridDiv2-mainContainer-mainButton">
              LOR: Letter of Recommendation
              <span class="material-symbols-outlined arrow-symbol-LOR">
                chevron_right
              </span>
            </div>
            <div className="LOR_s2-gridDiv2-mainContainer-mainButton2">
              Assignment
              <span class="material-symbols-outlined arrow-symbol-LOR2">
                chevron_right
              </span>
            </div>
            <div className="LOR_s2-gridDiv2-mainContainer-mainButton2">
              SOP: Statement of Purpose
              <span class="material-symbols-outlined arrow-symbol-LOR2">
                chevron_right
              </span>
            </div>
            <div className="LOR_s2-gridDiv2-mainContainer-mainDiv2">
              <div className="LOR_s2-gridDiv2-mainContainer-mainDiv2-imgDiv">
                
                <img
                  className="LOR_s2-gridDiv2-mainContainer-mainDiv2-img"
                  src={img2}
                  alt=""
                />
                <div className="LOR_s2-gridDiv2-mainContainer-mainDiv2-callIconDiv">
                <span class="material-symbols-outlined LOR-callIcon" >call</span>
                </div>
                <div className="LOR_s2-gridDiv2-mainContainer-mainDiv2-Text">
                  Have any Questions?  Call us Now !
                </div>
                <div className="LOR_s2-gridDiv2-mainContainer-mainDiv2-Text2">
                +91 70165 22535
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>

要实现屏幕宽度≤1000px时div2移到div1下方的效果，只需通过CSS媒体查询修改网格布局，并调整网格项样式即可：

1. 更新网格容器CSS #

添加媒体查询，在小屏幕下切换为单列布局：

.LOR_s2-gridContainer{
    display: grid;
    grid-template-columns: 90% 40%;
    margin-top: 90px;
    width: 70%;
    margin-left: 240px;
    gap: 20px;
}

/* 媒体查询：屏幕宽度≤1000px时生效 */
@media (max-width: 1000px) {
    .LOR_s2-gridContainer {
        grid-template-columns: 1fr; /* 改为单列布局 */
        margin-left: auto; /* 移除固定左侧margin，让容器自适应居中 */
        width: 90%; /* 调整容器宽度适配小屏幕 */
    }
}

2. 调整网格项小屏幕样式 #

重置div2的负margin和宽度，避免小屏幕下布局错乱：

.LOR_s2-gridDiv1{
    width: 75%;
}
.LOR_s2-gridDiv2{
    width: 80%;
    margin-left: -210px;
}

/* 小屏幕下重置网格项样式 */
@media (max-width: 1000px) {
    .LOR_s2-gridDiv1, .LOR_s2-gridDiv2 {
        width: 100%; /* 让网格项占满单列宽度 */
        margin-left: 0; /* 移除负margin，避免内容偏移 */
    }
}

效果说明 #

• 当屏幕宽度大于1000px时，保持原有90% 40%的双列网格布局
• 当屏幕宽度≤1000px时，媒体查询触发，网格切换为单列，div2自动排列到div1下方
• 同时重置网格项的宽度和margin，保证小屏幕下内容排版正常

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