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>

Ahaha yeah sorry, i asked the question then fell asleep! Im testing the answers now. — , Dec 23 '16 at 11:42

score 8 · Accepted Answer · answered Dec 23 '16 at 00:20

8

There are a lot of issues in your code:

There's no element with class desktopGrades in your HTML.
Your elements do not have desktopGrades class.
CSS is CaSe SeNsItIvE.
You cannot use margin and width together to make a calculated 100%.
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>

answered Dec 23 '16 at 00:20

Praveen Kumar Purushothaman

164,888
24
203
252

FWIW, from the point of view of a browser developer, `inline-block` is a lot better than float/clear too. This kind of usage, whilst common, is not what float was designed to do. – Luke Briggs Dec 23 '16 at 00:22
@LukeBriggs I know that, buddy. If you closely see, I am not using float in the normal way. I am using a `position`ing here, which the OP needs for full height view. If you see the full screen version, it is totally responsive. – Praveen Kumar Purushothaman Dec 23 '16 at 00:23
Using `display:inline-block` and getting rid of both the positioning and `float: left;` would ultimately perform notably better (and be shorter) as dealing with float is *complex* - particularly as floating elements affect potentially everything in the DOM after them. – Luke Briggs Dec 23 '16 at 00:26
@LukeBriggs I know... But I would say, this is the best I could get with the support of IE 7 browsers as well. If it's gonna be modern ones, I would use flex box. – Praveen Kumar Purushothaman Dec 23 '16 at 00:33
inline-block is supported by IE7 on UA inline elements which results in some [simple but clever workarounds](http://stackoverflow.com/a/6545033/2873896). I think giving up large performance gains to support old browsers is also very unfortunate too. – Luke Briggs Dec 23 '16 at 00:38
1

@LukeBriggs Yes! `:(` – Praveen Kumar Purushothaman Dec 23 '16 at 00:38
1

@LukeBriggs You know what? I guess the OP ran away! `:(` – Praveen Kumar Purushothaman Dec 23 '16 at 00:59
Its not working for me. It just displays them all in a column. Any ideas why? – Dec 23 '16 at 11:45
1

Never mind, i managed to get it to work, just needed to change the position to relative. Thanks! – Dec 23 '16 at 11:53
@PraveenKumar Yep! Now i just need to figure out how to add text too it :D – Dec 23 '16 at 12:43
@mexO Lemme know if you have any issues doing it... Just create a new question with full details and ping me here... `:D` – Praveen Kumar Purushothaman Dec 23 '16 at 15:39

score 0 · Answer 2 · answered Feb 02 '23 at 22:40

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>

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

2 Answers2