Blog Format

by Petra1999

HTML

<div class="container">
  <header>f-topbar</header>
  <aside>sidebar</aside>
  <section>
    <nav>topbar</nav>
    <article>post1</article>
    <article>post2</article>
  </section>
  <footer>f-bottombar</footer>
</div>

CSS

.container {
  margin-bottom:20px;
  border:1px solid black;
  width:100%;
  height:200px;
}
@media only screen and (max-width: 600px) {
  .container { height:500px; }
}
header { background:pink; }
footer { background:pink; }
aside { background:orange; }
section { background:lightblue; }
section article { background:lightgray; height:50px; }
nav { border:1px dashed red; height:50px; }


/* ------------------------------------------------- */

.container {
  
  display:grid;
  grid-gap: 0 0;

  justify-items: stretch; 
  align-items: stretch; 
  
  justify-content: stretch;
  align-content: stretch;

  grid-auto-columns: auto;
  grid-auto-rows: auto;
  grid-auto-flow: row;
  
  grid-template: 
      "header" 20px
      "sidebar" auto
      "content" auto
      "footer" 20px
      / auto; 

}

@media only screen and (min-width: 600px) {
  .container {
    grid-template: 
    "header header" 20px
    "sidebar content" auto
    "footer footer" 20px
    / 100px auto; 
  }
}

header  { grid-area:header; }
footer  { grid-area:footer; }
aside   { grid-area:sidebar; }
section { grid-area:content; }



/* ------------------------------------------------- */


header {
  
}
footer {
  
}
aside {
  height:auto;
}
section {
  display:flex;
  flex-flow: column nowrap;
  justify-content:flex-start;
  align-items:center;
  align-content:flex-start;
}
nav, article {
  width:80%;
  margin-bottom:9px;
}

@media only screen and (min-width: 600px) {
  aside {
    align-self:start;
    justify-self:center;
    margin-top:23px;
    height:30px;
  }
  nav, article {
    width:500px;
  }
}
















/* */