How to make a 2x2 grid of Div's in CSS?

Question

I am trying to make a 2x2 grid in CSS with 4 divs and i can do it. Heres my code so far. I just want it to be a 4x4 grid on divs that fills the container its in.

.Grades {
  width: 100%;
  height: 100%;
}

.desktopGrades {
  margin: 10px;
  box-sizing: border-box;
  float: left;
  width: 50%;
  height: 50%;
  clear: none;
}

<div class="grades">
  <div class="desktopGrades1">
    <h1>Maths</h1>
  </div>
  <div class="Desktopgrades2">
    <h1>Maths</h1>
  </div>
  <div class="desktopGrades3">
    <h1>Maths</h1>
  </div>
  <div class="desktopGrades4">
    <h1>Maths</h1>
  </div>
</div>

Answer 1

To create a grid, use CSS Grid Layout

/* Example of a 2×N grid: */
display: grid;
grid-template-columns: repeat(2, 1fr);

Example:

/* QuickReset */ *, ::after, ::before { margin: 0; box-sizing: border-box; }

body {
  min-height: 100vh;
  display: flex;
}

#grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  padding: 1rem;
  margin: auto;
  background: gray;
}

.cell {
  width: 100%;
  padding: 1rem;
  border-radius: 5%;
  background: gold;
}

<div id="grid-2x2">
  <div class="cell">Cell 1</div>
  <div class="cell">Cell 2</div>
  <div class="cell">Cell 3</div>
  <div class="cell">Cell 4</div>
</div>

Answer 2

There are a lot of issues in your code:

1. There's no element with class desktopGrades in your HTML.
2. Your elements do not have desktopGrades class.
3. CSS is CaSe SeNsItIvE.
4. You cannot use margin and width together to make a calculated 100%.
5. To use height it is complicated. See solution #2.

Working Snippet

.grades {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.desktopGrades {
  box-sizing: border-box;
  padding: 10px;
  float: left;
  width: 50%;
  height: 50%;
}
.desktopGrades h1 {
  border: 1px solid #ccc;
}

<div class="grades">
  <div class="desktopGrades desktopGrades1">
    <h1>Maths</h1>
  </div>
  <div class="desktopGrades desktopGrades2">
    <h1>Maths</h1>
  </div>
  <div class="desktopGrades desktopGrades3">
    <h1>Maths</h1>
  </div>
  <div class="desktopGrades desktopGrades4">
    <h1>Maths</h1>
  </div>
</div>

Alternative Solution

* {
  box-sizing: border-box;
  margin: 0;
}
.grades {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
}
.desktopGrades {
  padding: 10px;
  float: left;
  width: 50%;
  height: 50%;
}
.desktopGrades h1 {
  border: 1px solid #ccc;
  height: 100%;
}

<div class="grades">
  <div class="desktopGrades desktopGrades1">
    <h1>Maths</h1>
  </div>
  <div class="desktopGrades desktopGrades2">
    <h1>Maths</h1>
  </div>
  <div class="desktopGrades desktopGrades3">
    <h1>Maths</h1>
  </div>
  <div class="desktopGrades desktopGrades4">
    <h1>Maths</h1>
  </div>
</div>