CSS Grid-Based Layout. Header/footer and many as will fit grid-template

css-grid-based-layout-header-footer-and-many-as-will-fit-grid-template.markdown

CSS Grid-Based Layout. Header/footer and many as will fit grid-template

A Pen by Matthew Daniel Brown on CodePen.

License.

index.html

<header>
  <h1>CSS Grid Based Layout</h1>
</header>
<main>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
  <div>Grid Item</div>
</main>
<footer>
  <p>Footer Text</p>
</footer>

style.scss

$system-font:-apple-system,system-ui,BlinkMacSystemFont,
  "Segoe UI","Roboto","Helvetica Neue", Arial, sans-serif !default;

html {box-sizing: border-box;}
*,
*:before,
*:after {
  box-sizing: inherit;
  font-family: $system-font !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  // margin: 40px;
  background-color: #fff;
  color: #444;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100vw !important;
  height: 100% !important;
  min-height: 100vh !important;
}

h1,
p {
  margin: 0 0 1em 0;
}

.wrapper {
  margin: 40px !important;
  max-width: 940px;
  margin: 0 20px;
  display: grid;
  grid-gap: 10px;
}

/* no grid support? */

.wrapper {
  display: flex;
  flex-wrap: wrap;
}
.wrapper {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(150px, auto);
}

.panel {
  /* needed for the flex layout*/
  margin-left: 5px;
  margin-right: 5px;
  flex: 1 1 200px;
}

%header,
%footer {
  // margin-left: 5px !important;
  // margin-right: 5px  !important;
  // flex: 0 1 100%;
  // grid-column: 1 / -1 !important;
  width: 100% !important;
  display: block !important;
  border: whitesmoke solid 1px;
  color: #888;
  border-radius: 4px;
  padding: 40px 20px;
  font-size: 150%;
  // margin: 10px 0;
  background: whitesmoke !important;
  * {
    line-height: 1 !important;
    margin: 0 auto !important;
    vertical-align: middle;
  }
}

body > header {
  @extend %header;
}
body > footer {
  @extend %footer;
}

body>footer {
  font-size: small;
  text-align: center;
  letter-spacing: 1px;
  font-weight: 600;
}

.wrapper > * {
  /*   background-color: ; */
  border: darken(ghostwhite, 2%) solid 3px;
  color: #888;
  border-radius: 4px;
  padding: 20px;
  font-size: 150%;
  margin-bottom: 10px;
  background: ghostwhite;
  @extend .panel;
}

/* We need to set the margin used on flex items to 0 as we have gaps in grid.  */

@supports (display: grid) {
  .wrapper > * {
    margin: 0;
  }
  .panel {
    display: block !important;
  }
}

main {
  padding: 1em 0 !important;
  @extend .wrapper;
  flex-grow: 1 !important;
}