CSS 设置 2 行 4 个框，第一行 2 个框的中间有一个 link

Question

我一直在尝试将 4 个盒子和一个 link 放在 CSS 中，3 个排成一排，2 个在第一个下方，如下所示：Assignment example, but So far i have thisIssue

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

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

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

CSS 设置 2 行 4 个框，第一行 2 个框的中间有一个 link

CSS setting 4 boxes in 2 rows with a link in the middle of the 2 boxes in the first row

html

css

css-grid