various div contained in parent div and responsive to parent size

I would like to have all the div(1..7) inside the parent div next to each other and that when the size of the screen changes (portrait,landscape, scale) the organization of the div1..7 is done automatically so that they are always contained in the parent div.

So far I succeeded in:

have a centered parent which is responsive to any screen situation
all the div1..7 inside the parent div (but they are on top of each other)

What I miss:

div1..7 next to each other
div1..7 re-organized/resized automatically when the size of parent div change due to screen change.

html {background: #eee;}
* {padding: 0; margin: 0;}
html, body {height: 100%;text-align: center;}
.container{display: inline-block; vertical-align: middle; margin-top: 10vh; background: rgba(200,200,200,0.5);}
@media screen and (orientation:landscape) {.container {width: 60vw; height: 80vh;}}
@media screen and (orientation:portrait) {.container {width: 80vw; height: 80vh;}}

.div1 {display: block; background: rgba(80,0,0,0.5); width:100px; height:100px;float:left;}
.div2 {display: block; background: rgba(0,80,0,0.5); width:200px; height:100px;float:left;}
.div3 {display: block; background: rgba(0,0,80,0.5); width:100px; height:200px;float:left;}
.div4 {display: block; background: rgba(80,0,0,0.5); width:100px; height:100px;float:left;}
.div5 {display: block; background: rgba(0,80,0,0.5); width:200px; height:100px;float:left;}
.div6 {display: block; background: rgba(0,0,80,0.5); width:100px; height:200px;float:left;}
.div7 {display: block; background: rgba(80,0,0,0.5); width:100px; height:100px;float:left;}

<div class="container">
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>
	<div class="div4"></div>
	<div class="div5"></div>
	<div class="div6"></div>
	<div class="div7"></div>
</div>

Solution

Not too sure of what you really expect at the end .

fixed width and height using the window's size might come too small at one point.
boxes of different heights and widths can wrap onto few lines but won't imbricate

To center x,y the container , you may use the display table or flex properties. and avoid margins.It will allow also scrolling if the window comes too small.

here is a examples , do not hesitate to clarify :)

table display

.div6,
.div3 {
  background: rgba(0, 0, 80, 0.5);
  width: 100px;
  height: 200px;
}

.div2,
.div5 {
  background: rgba(0, 80, 0, 0.5);
  width: 200px;
  height: 100px;
}

.div7,
.div1,
.div4 {
  background: rgba(80, 0, 0, 0.5);
  width: 100px;
  height: 100px;
}

.container>div {
  float: left;
  /*see me */
  box-shadow: 0 0 0 2px;
}

html {
  height: 100%;
  width: 100%;
  display: table;
  text-align: center;
  background: #eee;
}

body {
  display: table-cell;
  vertical-align: middle;
}
.container {
  display:inline-block;
  background: rgba(200, 200, 200, 0.5);
}

@media screen and (orientation:landscape) {
  .container {
    max-width: 60vw;
  }
}

@media screen and (orientation:portrait) {
  .container {
    max-width: 80vw;
  }
}

<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
  <div class="div5"></div>
  <div class="div6"></div>
  <div class="div7"></div>
</div>

flex display

.div6,
.div3 {
  background: rgba(0, 0, 80, 0.5);
  width: 100px;
  height: 200px;
}

.div2,
.div5 {
  background: rgba(0, 80, 0, 0.5);
  width: 200px;
  height: 100px;
}

.div7,
.div1,
.div4 {
  background: rgba(80, 0, 0, 0.5);
  width: 100px;
  height: 100px;
}

.container>div {
  float: left;
}

html {
  height: 100%;
  display: flex;
  background: #eee;
}

body {
  margin:auto;
  display:flex;/* .container will wrap float elements and will show bg */
}
.container {
  background: rgba(200, 200, 200, 0.5);
}

@media screen and (orientation:landscape) {
  .container {
    max-width: 60vw;
  }
}

@media screen and (orientation:portrait) {
  .container {
    max-width: 80vw;
  }
}

<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
  <div class="div5"></div>
  <div class="div6"></div>
  <div class="div7"></div>
</div>

display:grid will alow divs to imbricate / span through columns or rows.

it also centers easily x,y a single element:

example with static sizes:

.div6,
.div3 {
  background: rgba(0, 0, 80, 0.5);
  width: 100px;
  height: 200px;
  grid-row: span 2;
}

.div2,
.div5 {
  background: rgba(0, 80, 0, 0.5);
  width: 200px;
  height: 100px;
  grid-column: span 2;
}

.div7,
.div1,
.div4 {
  background: rgba(80, 0, 0, 0.5);
  width: 100px;
  height: 100px;
}

.container>div {
  margin: auto;
}

html {
  height: 100%;
  display: grid;
  background: #eee;
}

body {
  margin: auto;
  /* to center x,y */
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill,100px);
  grid-gap: 1vh;
  background: rgba(200, 200, 200, 0.5);
}

@media screen and (orientation:landscape) {
  .container {
    width: 60vw;
    height: 80vh;
  }
}

@media screen and (orientation:portrait) {
  .container {
    width: 80vw;
    height: 80vh;
  }
}

<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
  <div class="div5"></div>
  <div class="div6"></div>
  <div class="div7"></div>
</div>

unlucky example resizing

.div6,
.div3 {
  background: rgba(0, 0, 80, 0.5);
  width: 100px;
  height: 200px;
  max-height:36vh;
  max-width:18vh;
  grid-row: span 2;
}

.div2,
.div5 {
  background: rgba(0, 80, 0, 0.5);
  width: 200px;
  height: 100px;
  max-height:18vh;
  max-width:36vh;
  grid-column: span 2;
}

.div7,
.div1,
.div4 {
  background: rgba(80, 0, 0, 0.5);
  width: 100px;
  height: 100px;
  max-height:18vh;
  max-width:18vh;
}

.container>div {
  margin: auto;
}

html {
  height: 100%;
  display: grid;
  background: #eee;
}

body {
  margin: auto;
  /* to center x,y */
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(10vh, 20vh));
  grid-gap: 1vh;
  background: rgba(200, 200, 200, 0.5);
}

@media screen and (orientation:landscape) {
  .container {
    width: 60vw;
    height: 80vh;
  }
}

@media screen and (orientation:portrait) {
  .container {
    width: 80vw;
    height: 80vh;
  }
}

<div class="container">
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
  <div class="div5"></div>
  <div class="div6"></div>
  <div class="div7"></div>
</div>