1

I have a little problem. I'm trying to program such a layout with HTML and CSS:

Here's the picture of what i want

I looked at this question: Flexbox 3 divs, two columns, one with two rows . The only problem is that you can't give the divs a margin without them destroying the layout.

If the left image is higher, then the two right images should use the remaining space. (There are only a few boxes that I tried to place correctly first. I wanted to do the styling privately, so do not wonder.)

Here is my code what I have tried so far (Press full page. In this little window you can only see the mobile version):

* {
  margin: 0;
  padding: 0;
}

#showroom {
  height: 500px;
  width: 100%;
  background: red; /* To see showroom Background */
  padding: 1em;
  display: flex;
}

#boxOne {
  height: 100%;
  width: 50%;
  background: grey;
  margin: 10px;
  float: left;
}

#showroom #boxTwo {
  width: 50%;
  height: 50%;
  background: grey;
  margin: 10px;
}

#showroom #boxThree {
  width: 50%;
  height: 50%;
  background: grey;
  margin: 10px;
}

@media only screen and (max-width: 750px) {
  #showroom {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  
  #showroom #boxOne, #showroom #boxTwo, #showroom #boxThree {
    height: 33.3%;
    width: 100%;
  }
}
<div id="showroom">
  <div id="boxOne"></div>
  <div id="boxTwo"></div>
  <div id="boxThree"></div>
</div>

1 Answers1

1

Update

To make the #boxOne wider, we should look at the grid parent, which we are saying is 3 columns wide, with each column representing 120px.

Now let's look at #boxOne for a second, and catch/fix an error I introduced.

#boxOne {
  grid-column: 1; /* Oops—this is wrong */
  grid-row: 1 / 3;
}

We declared the grid to be 3 columns, yet #boxOne is only spanning a single column. The other boxes are also spanning a single column. Here's what our grid looks like now.

enter image description here

You can see that we're not even using that third column. Let's adjust #boxOne to span twice as wide as the other boxes. One really important detail is to count from the first vertical line. Think of the column like this:

enter image description here

Now it should be clear what we need to do.

#boxOne {
  grid-column: 1 / 3;
  …
}

The other boxes we'll place at the span place where #boxOne left off.

#boxTwo {
  grid-column: 3;
  …
}

#boxThree {
  grid-column: 3;
  …
}

Now things are looking the way we want.

enter image description here

I would approach this using CSS Grid. In your example, the images would implicitly take up the necessary space, and you wouldn't need to use px values in the line declaring grid-template-columns. In your case, you could replace 120px with 1fr which is a fractional unit utilized by CSS Grid.

Another advantage of using CSS Grid is that you can avoid a lot of additional width and height settings, as well as using margins for the gaps between items.

#showroom {
  display: grid;
  grid-template-columns: repeat(3, 120px);
  gap: 1rem;
}

#boxOne {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

#boxTwo {
  grid-column: 3;
  grid-row: 1 / 2;
}

#boxThree {
  grid-column: 3;
  grid-row: 2 / 3;
}

#showroom > * {
  background-color: #444;
  padding: 20px;
  border-radius: 5px;
}
<div id="showroom">
  <div id="boxOne"></div>
  <div id="boxTwo"></div>
  <div id="boxThree"></div>
</div>
Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61
  • Thank you very much, this is exactly what I was looking for. But is there a way to make **ONLY** the boxOne wider? If so how would that work with the grid system? Sorry, i'm a `Grid` noob –  Jun 18 '21 at 20:23
  • @JustChillinInDaHood I've updated the answer for you and included some needed explanation for how to think of the grid. – Andy Hoffman Jun 18 '21 at 21:50
  • i'm so so sorry but do you know how to make it responsive? With a page width of 750px all boxes should have a width of 100% and all should be the same height so about 100px. I am so sorry to bother you `@media screen and (max-width: 750px){}` –  Jun 21 '21 at 09:27
  • @JustChillinInDaHood I would take what you have thus far and create a new question. – Andy Hoffman Jun 21 '21 at 15:00
  • Thanks that's a good idea –  Jun 21 '21 at 19:06