I cannot for the life of me figure out how to put 4 boxes next to each other in a 2x2 formation

Language Help CSS
1

Basically, I want a 2x2 formation of squares and cannot figure out how to do it. Here is the link to my code I would like the fonts squares to be in a 2x2 formation.

2

I’ve never used Grid but this sounds like a good fit for that implementation in CSS. Worth looking into, in my view.

In old school methodology we would just create a container and populate it with four inline containers, then set the width of the parent container to slightly more than two times the width of the inner containers.

<div id="parent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

#parent div {
    width: 200px;
    border: 1px solid maroon;
    display: inline-block;
    margin: 2px;
}
#parent {
    width: 412px;
    height: 412px;
    border: 2px solid teal;
}

You will need to tinker with the width and margin, but you get the idea. The parent will only be able to fit two boxes on the top row so the other two will wrap to the next row.

3

Yeah, you could use CSS Grid here. Grid tends to be better for 2 dimensional layouts, as opposed to flexbox, which tends to be better for 1 dimensional layouts like navbars and footers.

HTML

<div class='parent'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

CSS

.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px 10px;
}

div {
  width: 100px;
  height: 100px;
  background: pink;
}

That’s a starting point. I would also suggest that you have a lot of unnecessary code repetition in your design system so far, and you could probably reduce that with variables and simpler styling.

For example, at the top of your CSS file, you could define a set of color variables like so:

:root {
  --primary-color: #FFFFFF;
  --secondary-color: #000000;
  etc.
}

Then, later, you could use those variables like so:

.primary-swatch {
  background: var(--primary-color);
}

And for less code repetition, you could create a more general purpose swatch div style and add classes to each swatch modifying the background color.

// CSS
.color-swatch {
  border: solid 2.5px black;
  border-radius: 3px;
  text-align: center;
  font-weight: 700;
  font-size: 20px;
}

.primary-swatch {
  background: var(--primary-color);
}

// HTML
<div class = "color-swatch primary-swatch">Primary Color</div>