From 2 grids in line, to 2 grids below each other (responsiveness)-CodePudding

Simple code that took me 9 hours to make, sad reality. I tried a lot of tutorials and pages, but even they are unable to help me. I copied/modified multiple lines of code that I came across, but none does anything. This is just a learning page, where I'm trying to incorporate grid responsiveness for variety of devices.

I attached screens below, with how it is, and how I want it to be.

I believe it is quite simple thing to do, seing how some tutorial code consists of 1/2 lines, but it still seems too much for me to comprehend it.

Code below is work in progress, and responsiveness seems to be todays standard, and if anyone can explain to me how to do it, I will be grateful.

<div >
    <div >
        <div ></div>
        <div ></div>
        <div ></div>
    </div>
    <div ></div>
    <div >
        <div ></div>
    </div>
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    height: 100vh;
    width: 100fv;
    background-color: brown;
}
.container {
    min-height: 100%;
    background-color: aquamarine;
    grid-template-columns: 1fr 1fr;
    display: grid;
}
    .top {
        background-color: blue;
        display: grid;
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
}
        .t_e1 {
            background-color: antiquewhite;
            display: grid;
            grid-column-start: 2;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 3;
}
    .main {
        background-color: blueviolet;
        display: grid;
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 5;
}
    .bottom {
        background-color: chartreuse;
        display: grid;
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 5;
        grid-row-end: 6;
}
        .b_e1 {
        background-color: coral;
        display: grid;    
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 6;
}

[Currently][1]
[Desired effect][2]

  [1]: https://i.stack.imgur.com/Vs0lR.jpg
  [2]: https://i.stack.imgur.com/wUH7H.jpg

CodePudding user response：

So the word responsiveness is a bit vague. Do you mean that the grids should be expanding to the width of window? if so that is the default behaviour. Or did you mean grid should stack up vertically when screen width gets small enough. I'd assume that's what you meant.

HTML

<div >
  <div ></div>
  <div ></div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.cont {
  display: flex;
  margin-bottom: 10px;
}

.a,
.b {
  flex: 1;
  padding: 20px;
}

.a {
  background: red;
}

.b {
  background-color: blue;
  max-width: 300px;
}

@media screen and (max-width: 1000px) {
  .cont {
    flex-direction: column;
  }

  .b {
    max-width: none;
  }
}

Explanation:

I create 2 divs
Each div has two more divs
Container divs have css flexbox property
Child divs get flex: 1 which tells them to expand (learn flexbox properly) https://www.codecademy.com/learn/learn-intermediate-css/modules/layout-with-flexbox
div B has max width so it expands but not more than that
I use media query max-width which makes it that styles under only apply IF the condition is met, the condition here is that width of browser is NOT more than 1000px
In there I change flexbox-direction to column, which means child divs will stack vertically not horizontally
I also remove the max-width on div B

CodePudding user response：

This is my solution:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100fv;
  background-color: brown;
}

.container {
  min-height: 100%;
  background-color: aquamarine;
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.top {
  background-color: blue;
  display: grid;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

.t_e1 {
  background-color: antiquewhite;
  display: grid;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

.main {
  background-color: blueviolet;
  display: grid;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 5;
}

.bottom {
  background-color: chartreuse;
  display: grid;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 5;
  grid-row-end: 6;
}

.b_e1 {
  background-color: coral;
  display: grid;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 6;
}


/*new code from here*/

@media (max-width: 640px) {
  .top,
  .bottom {
    display: flex;
    flex-direction: column-reverse;
  }
  .t_e1,
  .t_e2,
  .t_e3,
  .b_e1 {
    display: block;
  }
  .t_e1,
  .b_e1 {
    min-height: 50px;
  }
}

<div >
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
  <div ></div>
  <div >
    <div ></div>
  </div>
</div>