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

I've been trying to put 4 boxes and one link together in CSS, 3 in one row and 2 below the first one like this: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>

How can i make make the green and blue box aligned? What am i doing wrong?I know the whole box model with padding and margin but i can't understand exactly how i'm supposed to aligned them.

CodePudding user response：

I made a few changes and I just going to list you from top to bottom what I changed.

grid-gap: 100px; -> grid-row-gap: 100px; this is to remove unecessary large gaps between the columns which will put the breakpoint of the grid further down (the width where the laout starts breaking)
grid-template-columns: 200px 200px 200px; -> grid-template-columns: 200px auto 200px; this is to make the center column consume all remaining space not just fixed 200 pixel. This will make the grid more responsive and move the rbeakpoint of the grid further down.
I added grid-template-areas: "one link two" "three . four"; to place the different elements that you tried to place through the order-property.
p { grid-area: link; text-align: center; } was added to place the link to its supposed poisiton (the the reference in step 3 with grid-template-areas). Also it centers the link´.
body > div { box-sizing: border-box; border-style: solid; border-width: 5px; margin: 5px; padding: 5px; } was added. You repeated all those properties for every of the 4 div-boxes. As such I removed them from those ID's and just defined them for all to make the code way shorter.
For every of the 4 ID's I know declared the grid-area instead of 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>

CodePudding user response：

I might not be the best person to answer this but I know using Flex and Flex Box are the recommended way of aligning things with CSS now days. You might have some luck going down that path...

https://www.w3schools.com/css/css3_flexbox_container.asp

I've used it in React Native and found that doc to be fairly clear. The concept will still apply...

https://reactnative.dev/docs/flexbox