CODEWITHSUNDEEP
htmlcsslayoutflexbox
user12536153
user12536153

Reputation:

Css Grid Layout Issues ( with flexbox )

I'm trying to create a layout using the Flex structure. This is exactly the main image I wanted it to be.

This layout will also be compatible with the mobile view.

1- My Sidebar component doesn't stick to the bottom of my hero component. I used "margin-top: -200px;" for this problem. but I don't want that.

2- Between my components, I want to use margin as pictured. But because I calculate the size of each component as a percentage of "%" and they completely cover the page, if I give margin, they become wrap. What's the right way for me to do this ?

3- Do you think the flexbox settings I have applied are correct ? What would be better for me to change ?

Thank you in advance for your help.

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

.header {
  background-color: #59D4EB;
  text-align: center;
  height: 80px;
}


/* Main Container */

.container {
  display: flex;
  flex-flow: column nowrap;
  text-align: center;
}


/* Container */

.container-main {
  display: flex;
  flex-wrap: wrap;
}


/* Items */

.hero {
  flex: 1 0 40%;
  height: 400px;
  background-color: #D5C9E2;
}

.main-content {
  flex: 1 0 60%;
  height: 600px;
  background-color: #F5C546;
}

.sidebar {
  height: 500px;
  flex: 1 0 40%;
  background-color: #A0C263;
  /* I DONT WANT USE THİS  MARGİN-TOP */
  margin-top: -200px;
}

.extra-content {
  flex: 1 0 60%;
  background-color: #898989;
  height: 300px;
}


/* Container */

.images-posts-cont {
  display: flex;
  height: 150px;
}


/* Items */

.images {
  flex: 1 0 70%;
  background-color: #53B774;
}

.posts {
  flex: 1 0 30%;
  background-color: #F3CDDD;
}


/* Footer */

.footer {
  text-align: center;
  height: 80px;
  background-color: #F4A540;
}

@media screen and (max-width:599px) {
  .hero {
    flex: 1 0 100%;
    order: 1;
  }
  .sidebar {
    flex: 1 0 100%;
    order: 2;
  }
  .main-content {
    order: 3;
  }
  .extra-content {
    order: 4;
  }
}

;
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="src/css/test.css">
  <title> Flexbox Layout</title>
</head>

<body>
  <!-- FlexBox Layout -->
  <header class="header">
    <h2>header</h2>
  </header>
  <div class="container">
    <section class="container-main">
      <div class="hero">
        <h2>hero</h2>
      </div>
      <div class="main-content">
        <h2>main-content</h2>
      </div>
      <div class="sidebar">
        <h2>sidebar</h2>
      </div>
      <div class="extra-content">
        <h2>extra content</h2>
      </div>
    </section>
    <section class="images-posts-cont">
      <div class="images">
        <h2>related images</h2>
      </div>
      <div class="posts">
        <h2>related posts</h2>
      </div>
    </section>
    <footer class="footer">
      <h2>footer</h2>
    </footer>
  </div>


</body>

</html>

Upvotes: 1

Views: 1439

Answers (2)

Yash Bathia
Yash Bathia

Reputation: 43

I think you can still use flex. Just you have to wrap both components left and right with div.

  1. left = > hero and side nav
  2. right = > main content and extra content

I just add 2 div. Look below the code.

    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    
    .header {
      background-color: #59D4EB;
      text-align: center;
      height: 80px;
    }
    
    
    /* Main Container */
    
    .container {
      display: flex;
      flex-flow: column nowrap;
      text-align: center;
    }
    
    
    /* Container */
    
    .container-main {
      display: flex;
      flex-wrap: wrap;
    }
    
    
    /* Items */
    .left{
      width: 40%;
    }
    .right {
      width: 60%;
    }
    .hero {
      height: 400px;
      background-color: #D5C9E2;
    }
    
    .main-content {
      flex: 1 0 60%;
      height: 600px;
      background-color: #F5C546;
    }
    
    .sidebar {
      height: 500px;
      flex: 1 0 40%;
      background-color: #A0C263;
      /* I DONT WANT USE THİS  MARGİN-TOP */
    }
    
    .extra-content {
      flex: 1 0 60%;
      background-color: #898989;
      height: 300px;
    }
    
    
    /* Container */
    
    .images-posts-cont {
      display: flex;
      height: 150px;
    }
    
    
    /* Items */
    
    .images {
      flex: 1 0 70%;
      background-color: #53B774;
    }
    
    .posts {
      flex: 1 0 30%;
      background-color: #F3CDDD;
    }
    
    
    /* Footer */
    
    .footer {
      text-align: center;
      height: 80px;
      background-color: #F4A540;
    }
    
    @media screen and (max-width:599px) {
      .hero {
        flex: 1 0 100%;
        order: 1;
      }
      .sidebar {
        flex: 1 0 100%;
        order: 2;
      }
      .main-content {
        order: 3;
      }
      .extra-content {
        order: 4;
      }
    }
     <body>
         <!-- FlexBox Layout -->
      <header class="header">
        <h2>header</h2>
      </header>
      <div class="container">
        <section class="container-main">
          <div class="left">
          <div class="hero">
            <h2>hero</h2>
          </div>
            <div class="sidebar">
            <h2>sidebar</h2>
          </div>
          </div>
          <div class="right">
          <div class="main-content">
            <h2>main-content</h2>
          </div>
            <div class="extra-content">
            <h2>extra content</h2>
          </div>
          </div>
          
        </section>
        <section class="images-posts-cont">
          <div class="images">
            <h2>related images</h2>
          </div>
          <div class="posts">
            <h2>related posts</h2>
          </div>
        </section>
        <footer class="footer">
          <h2>footer</h2>
        </footer>
      </div>
    </body>

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105853

There can be 2 grids here , one with the header the contents and the footer, and then another grid inside the content area.

Here is a possibility to start from for such a layout with grid where a break point can turn the second grid into a flex column layout with a mediaquerie (set at 500px for the demo):

body {
  /* first grid of 3 rows , flex can do it too */
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

body main {
  /* second grid for the contents in between header and footer */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 5px 0;
  grid-gap: 5px;
}

header {
  background: #74d3e8;
}


/* set each element inside cell(s) of the grid */

.main {
  grid-row: 1 / span 2;
  grid-column: 2 / span 2;
  background: #f0c354;
}

.hero {
  grid-column: 1;
  grid-row: 1;
  background: #d4cbe0;
}

.sidebar {
  grid-column: 1;
  grid-row: 2 / span 2;
  background: #a7be6d;
}

.extra {
  grid-column: 2 / span 2;
  grid-row: 3;
  background: #898989;
}

.relI {
  grid-column: 1 / span 2;
  grid-row: 4;
  background: #58b076;
}

.relP {
  grid-column: 3;
  grid-row: 4;
  background: #edd0de;
}

footer {
  background: #f4a540;
}

/* set here your break point */

@media screen and (max-width: 500px) {
  body main {
    display: flex;
    flex-flow: column;
  }
  .main {
    flex: 1;
  }
  
  /* from you can use order to reset order of the boxes in main */
}
<header>header</header>
<main>
  <article class="main">Main content</article>
  <section class="hero">hero</section>
  <aside class="sidebar">Sidebar</aside>
  <section class="extra">Extra content</section>
  <aside class="relI">Related images</aside>
  <aside class="relP">Related post</aside>
</main>
<footer>Footer</footer>

Usefull ressource to go further : https://gridbyexample.com/ */ https://css-tricks.com/snippets/css/complete-guide-grid/

here is a demo to play with : https://codepen.io/gc-nomade/pen/jObgNOO

Upvotes: 0

Related Questions