css-grid example

css-grid.html

const backgroundColor = "#eee";

export default () => (
  <div className="hello">
    <div className="wrapper">
      <div className="item1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
    <style jsx global>{`
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        box-sizing: border-box;
      }

      .wrapper {
        height: calc(100vh - 10px); /* must be 100vh not 100% */
        display: grid;
        grid: 100px 1fr 100px / 100px 1fr 100px;
        border: solid thick;
      }

      .wrapper div {
        border: 1px solid #efefef;
      }

      .item1 {
        background: #efefef;
      }
    `}</style>
  </div>
);