CSS设置2行4个框，第一行2个框中间有一个链接

Question

我一直试图在 CSS 中将 4 个框和一个链接放在一起，3 个在一行中，2 个在第一个下方，如下所示：Assignment example，但到目前为止我有这个Issue

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: grid;
  grid-gap: 100px;
  grid-template-columns: 200px 200px 200px;
}

a {
  padding: 5px;
  background-color: blue;
  text-decoration-line: none;
  color: white;
}

#one {
  border-style: solid;
  order: 4;
  border-width: 5px;
  border-color: blue;
  box-sizing: border-box;
  width: 200px;
  height: 130px;
  margin: 5px;
  padding: 5px;
}

#two {
  border-style: solid;
  order: 1;
  border-width: 5px;
  border-color: green;
  box-sizing: border-box;
  width: 200px;
  height: 110px;
  margin: 5px;
  padding: 5px;
}

#three {
  border-style: solid;
  order: 0;
  border-color: orange;
  border-width: 5px;
  box-sizing: border-box;
  width: 200px;
  height: 150px;
  margin: 5px;
  padding: 5px;
}

#four {
  border-style: solid;
  order: 3;
  border-color: yellow;
  border-width: 5px;
  box-sizing: border-box;
  width: 200px;
  height: 110px;
  margin: 5px;
  padding: 5px;
}

<div id="one">
  Turns out you have a really fun time if you go to work every day and focus on being silly and funny and happy! - Hannah Murray
</div>
<div id="two">
  All you need in this life is ignorance and confidence, and then success is sure. - Mark Twain
</div>
<div id="three">
  Well, if crime fighters fight crime and fire fighters fight fire, what do freedom fighters fight? They never mention that part to us, do they? - George Carlin
</div>
<div id="four">
  Great minds discuss ideas; average minds discuss events; small minds discuss people. - Eleanor Roosevelt
</div>
<p id="link">
  <a href="https://www.brainyquote.com/" target="_blank">
Brainy Quote</a>
</p>

如何使绿色和蓝色框对齐？ 我在做什么错？我知道带有填充和边距的整个盒子模型，但我无法准确理解我应该如何对齐它们。

Answer 1

我做了一些更改，我将从上到下列出我所做的更改。

1. grid-gap: 100px; -> grid-row-gap: 100px; 这是为了消除列之间不必要的大间隙，这将使网格的断点进一步向下（laout 开始中断的宽度）
2. grid-template-columns: 200px 200px 200px; -> grid-template-columns: 200px auto 200px; 这是为了让中心列消耗所有剩余空间，而不仅仅是固定的 200 像素。这将使网格更具响应性并将网格的 rbeakpoint 进一步向下移动。
3. 我添加了grid-template-areas: "one link two" "three . four"; 来放置您尝试通过order-property 放置的不同元素。
4. 添加了p { grid-area: link; text-align: center; } 以放置指向其假定位置的链接（步骤3 中的引用grid-template-areas）。它还使链接居中'。
5. body > div { box-sizing: border-box; border-style: solid; border-width: 5px; margin: 5px; padding: 5px; } 已添加。您为 4 个 div 框中的每一个重复了所有这些属性。因此，我从 ID's 中删除了它们，并为所有人定义了它们，以使代码更短。
6. 对于我所知道的 4 个ID's 中的每一个都声明了grid-area 而不是order

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: grid;
  grid-row-gap: 100px;
  grid-template-columns: 200px auto 200px;
  grid-template-areas:
    "one link two"
    "three . four";
}

a {
  padding: 5px;
  background-color: blue;
  text-decoration-line: none;
  color: white;  
}

p {
  grid-area: link;
  text-align: center;
}

body > div {
  box-sizing: border-box;
  border-style: solid;
  border-width: 5px; 
  margin: 5px;
  padding: 5px;
}

#one { 
  border-color: blue;
  grid-area: one;
}

#two {
  border-color: green;
  grid-area: two;
}

#three {
  border-color: orange;
  grid-area: three;
}

#four {
  border-color: yellow;
  grid-area: four;
}

<div id="one">
  Turns out you have a really fun time if you go to work every day and focus on being silly and funny and happy! - Hannah Murray
</div>
<div id="two">
  All you need in this life is ignorance and confidence, and then success is sure. - Mark Twain
</div>
<div id="three">
  Well, if crime fighters fight crime and fire fighters fight fire, what do freedom fighters fight? They never mention that part to us, do they? - George Carlin
</div>
<div id="four">
  Great minds discuss ideas; average minds discuss events; small minds discuss people. - Eleanor Roosevelt
</div>
<p id="link">
  <a href="https://www.brainyquote.com/" target="_blank">
Brainy Quote</a>
</p>