make a square of 4 individual squares

Question

I am working on a css layout involving 3 pieces. 1 full square w/ image, 1 square with 2 top squares and 1 bottom rectangle, and 1 square w/ 4 individual squares inside the main square. I'm pretty sure I have the first 2 down, but the one I am working on that I am having a problem with is the square w/ 4 squares inside it.

I have something that kind of works, but anything outside of a large viewport collapses. Here is my code, has anyone built something similar?

.test {
  width: 100%;
  height: auto;
  border: 1px solid red;
  display: block;
}
.inner {
  width: calc(49% + 13px);
  display: inline-block;
  height: 100px;
  margin: 0px -6px 0px 0px;
}
.inner:nth-child(even) {
  border: 1px solid blue;
}
.inner:nth-child(odd) {
  border: 1px solid green;
}

<div class="test">
  <div class="inner">
    1
  </div>
  <div class='inner'>
    2
  </div>
  <div class="inner">
    3
  </div>
  <div class="inner">
    4
  </div>
</div>

Adding an image would help to understand what are you trying to achieve. — Łukasz Szcześniak, Aug 17 '16 at 22:04
Can you explain any clearer what exactly you are looking to achieve? The code is pretty simple to see but your description sounds very complex and I can't interpret it in any meaningful way to match your code — Darren H, Aug 17 '16 at 22:05
Yes, please provide a visual. [Is this the target layout](https://jsfiddle.net/tb0htsb3/)? — hungerstar, Aug 17 '16 at 22:10

Termonator145 · Answer 1 · 2016-08-17T22:08:30.033

2

When you are defining the width, any screen where 1% of the width is less than 13px is going to cause the wrap because it cannot fit 2 div classes inline. why not just set width: 50%; ?

edit: i am under the assumption that you are looking for something similar to this: https://jsfiddle.net/tfovunso/

edited Aug 17 '16 at 22:08

answered Aug 17 '16 at 22:06

Termonator145

109
1
14

Maju · Answer 2 · 2016-08-17T22:40:16.210

Do you mean something like this? 1 big square from 4 smaller squares and using full width of wrapper?

* {
  box-sizing: border-box;
}
.test {
  width: 100%;
  height: auto;
  box-shadow: 0 0 0 1px red;
  display: block;
}
.test:after {
  content: ' ';
  clear: both;
  display: block;
}
.inner {
  position: relative;
  float: left;
  width: 50%;
  display: block;
  padding-top: 50%;
  margin: 0;
}
.inner:nth-child(even) {
  box-shadow: inset 0 0 0 1px blue;
}
.inner:nth-child(odd) {
  box-shadow: inset 0 0 0 1px green;
}
.inner > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  overflow-y: auto;
  padding: 10px;
}

<div class="test">
  <div class="inner">
    <div>1</div>
  </div>
  <div class='inner'>
    <div>2</div>
  </div>
  <div class="inner">
    <div>3</div>
  </div>
  <div class="inner">
    <div>4</div>
  </div>
</div>

hungerstar · Accepted Answer · 2016-08-18T13:58:52.053

1

If you're looking for a 2x2 grid and not using flexbox then I would float instead of inline-block.

* {
  box-sizing: border-box;
}
.test {
  border: 1px solid red;
  overflow: hidden; // clearfix
}
.inner {
  width: 50%;
  float: left;
  height: 100px;
}
.inner:nth-child(even) {
  border: 1px solid blue;
}
.inner:nth-child(odd) {
  border: 1px solid green;
}

<div class="test">
  <div class="inner">
    1
  </div>
  <div class='inner'>
    2
  </div>
  <div class="inner">
    3
  </div>
  <div class="inner">
    4
  </div>
</div>

box-sizing: border-box; allows you to include padding and borders with your width/height declarations. Helpful when padding and borders cause elements to wrap when you don't want them to.

edited Aug 18 '16 at 13:58

answered Aug 17 '16 at 22:14

hungerstar

21,206
6
50
59

I was about to make it too... but mine put them in one row, how did you make it split into two? – Akxe Aug 17 '16 at 22:21
1

I'm not sure what you're saying. Are you saying you used my code but it put them in one row? When you float items, as I have, they will stack in the direction of the float until there isn't enough room for them in the containing box, then they reflow to the next line and continue stacking in the direction of the float. In my code, all `.inner` elements will be half the parents width and floated left. So only two will ever fit in a row and then reflowing. – hungerstar Aug 18 '16 at 13:58

score 1 · Answer 4 · edited May 23 '17 at 12:08

hey man is this what you're looking for?

https://jsfiddle.net/jpezninjo/0bp0ha03/

idk what goes here dammit stackoverflow

The code should be pretty easy to follow. The odd childs are floating left and I'm making the even childs take up the remaining space. Do note that I had to remove your margin: 0px -6px 0px 0px.

I'm taking use of something called "block formatting context" which I learned about looking up how to make a div take up the remaining width some time ago.

It requires the divs that you want to take up the x remaining width to have overflox: hidden and float: none

You can find the post here: Expand a div to take the remaining width

You need to put code in your answer before you can link to JSFiddle, CodePen, JSBin etc. Also, the odd DIVs are slightly larger than the even DIVs. — hungerstar, Aug 18 '16 at 13:45

make a square of 4 individual squares

4 Answers4