hazardous

fun with css

the 'holy grail'

css is like a pit of quicksand except it's really fun until you're pulling an all-night slowly losing your mind because an element somewhere just won't budge.

the following is more for me than anyone else - a simple CSS layout to start off projects with.

/* Layout */


* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: 10em 1fr 10em;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:  "header header header"
                        "nav article aside"
                        "footer footer footer";
  grid-gap: 1rem;
  height: calc(100vh - 2em);
}
header {
  grid-area: header;
}
nav {
  grid-area: nav;
}
article {
  grid-area: article;
}
aside {
  grid-area: aside;
}
footer {
  grid-area: footer;
}

/* Bonus : Responsive */

@media (max-width: 640px) {
  .container {
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    grid-template-areas:  "header header "
                          "article article"
                          "nav aside"
                          "footer footer";
    height: auto;
  }
}

@media (max-width: 480px) {
  .container {
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas:  "header"
                          "article"
                          "aside"
                          "nav"
                          "footer";
  }
}

/* Decoration */

* {box-sizing: border-box}
body {
    margin: 0;
  padding: 0;
    background: #fff;
    font-family: arial, sans-serif;
    font-size: 1.2em;
}

nav, section, article, aside, header, footer {
    padding: 1rem;
    color: #fff;
}
nav {
    background: dodgerblue;
}
section {
    background: hotpink;
}
article {
  background: orange;
}
aside {
  background: olivedrab;
}
header {
  background: gray;
}
footer {
  background: crimson;
}
body {
  padding: 1em;
  background: #000;
}

<div class="container">
  <header>header</header>
  <article>article</article>
  <nav>navigation</nav>
  <aside>aside</aside>
  <footer>footer</footer>
</div>

September 13, 2020