-5

Do you know how to make the grid like this? desired grid layout

I tried to create that with margins to make white spaces. However, it doesn't work for first <div> because it has own height and margin [%].

.block {
  height: 270px;
  width: 47%;
  margin: 1.5%;
  display: block;
  float: left;
}

.blockbig {
  width: 97%;
  margin: 1.5%;
  height: 540px;
  display: block;
  float: left;
}

.blockw {
  width: 97%;
  margin: 1.5%;
  height: 270px;
  display: block;
  float: left;
}

.rectagle {
  height: 550px;
  width: 47%;
  margin: 1.5%;
  display: block;
  float: left;
}

.row1 {
  width: 50%;
  float: left;
}

@media (max-width: 1160px) {
  .container {
    width: 90%;
  }
}

@media (max-width: 900px) {
  #b4 {
    clear: both;
  }
  .block {
    width: 28.83%;
  }
}
<div class="container">

  <div class="row1">
    <div class="">
      <div id="b1" class="rectagle" style="background-color: Beige;">1</div>
      <div id="b2" class="block" style="background-color: orange;">2</div>
      <div id="b6" class="block" style="background-color: blue;">6</div>
    </div>
    <div id="b7" class="blockbig" style="background-color: black;">7</div>
  </div>

  <div class="row1">
    <div id="b3" class="block" style="background-color: black;">3</div>
    <div id="b4" class="block" style="background-color: orange;">4</div>
    <div id="b5" class="blockbig" style="background-color: Aquamarine">5</div>
    <div id="b8" class="blockw" style="background-color: Azure ;">8</div>
  </div>

</div>

View on JSFiddle

My attempt looks like this:

my attempt

I would be nice if it's responsive.
Here is the template, which I have to convert.

1
  • Do you have any suggestions? It's killing me.
    – Dom.in
    Jan 26, 2018 at 20:17

1 Answer 1

0

Ok, I made that.

* {
box-sizing: border-box;
}

#b1 {
display: block;
float: left;
width: 25%;
height: 540px;
}

#b2, #b3, #b4, #b6 {
display: block;
float: left;
width: 25%;
height: 270px;
}

#b5, #b7 {
display: block;
width: 50%;
height: 540px;
}

#b5 {
float: right;	
}

#b7 {
float: left;
}	

#b8 {
display: block;
float: left;
width: 50%;
height: 270px;
}	

.row1 {
width: 100%;
}

@media (max-width: 1160px) {

.container {
width: 90%;
}

.container1 {
width: 100%;
	
}

@media (max-width: 850px) {

#b1, #b7 {
height: 428px;	
}

#b2, #b3, #b4, #b6 {
height: 214px;
}	

#b1, #b2, #b3, #b4, #b6 {	
width: calc(100%/3);	
}

#b5, #b8 {
height: 214px;
}	

}

@media (max-width: 640px) {
	
#b1, #b2, #b3, #b4, #b6, #b7, #b5 {
width: 50%;
}	

#b7 {
height: 214px;		
}

#b8 {
width: 100%;
}	
	
}


@media (max-width: 480px) {
	
#b1, #b2, #b3, #b4, #b6, #b7, #b5, #b8 {
width: 100%;
height: 400px; 
}	
	
}	
<div class="container1">

<div class="row1">

<div id="b1" class="inline-block" style="background-color: Beige;"><div class="block-content">1</div></div>
<div id="b2" class="inline-block" style="background-color: orange;"><div class="block-content">2</div></div>
<div id="b3" class="inline-block" style="background-color: black;"><div class="block-content">3</div></div>
<div id="b4" class="inline-block" style="background-color: orange;"><div class="block-content">4</div></div>

<div id="b6" class="inline-block" style="background-color: blue;"><div class="block-content">6</div></div>
<div id="b5" class="inline-block" style="background-color: Aquamarine"><div class="block-content">5</div></div>
<div id="b7" class="inline-block" style="background-color: black;"><div class="block-content">7</div></div>
<div id="b8" class="inline-block" style="background-color: Azure ;"><div class="block-content">8</div></div>

</div>
</div>

However, with border-box, I do not know how to use padding to add white spaces [10px] around all blocks.

1
  • border: 10px solid #ffffff finally has solved the problem ;)
    – Dom.in
    Jan 27, 2018 at 11:23

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.