CSS Grid Example

App.tsx

import React from "react";
import styled from "styled-components";

const Scene = styled.div`
  flex: auto;
  display: grid;
  grid-template-rows: 48px auto;
  overflow: hidden;

  & > div,
  header,
  main {
    border: 1px black solid;
  }
`;

const Header = styled.header``;

const Main = styled.main`
  flex: auto;
  display: grid;
  grid-template-rows: 38px auto 38px;
  grid-template-columns: repeat(2, 229px) auto;

  & > div {
    border: 1px grey solid;
  }

  & > .primary-panel {
    grid-column: 0/1;
    grid-row: 1/3;
  }

  & > .secondary-panel {
    grid-column: 1/2;
    grid-row: 1/3;
  }

  & > .action-panel {
    grid-row: 1/2;
    grid-column: 3/4;
  }

  & > .map {
    grid-row: 2/3;
    grid-column: 3/4;
  }

  & > .footer-panel {
    grid-row: 3/4;
    grid-column: 1/4;
  }
`;

function App() {
  return (
    <Scene>
      <Header>Header</Header>
      <Main>
        <div className="primary-panel">Panel A</div>
        <div className="secondary-panel">Panel B</div>
        <div className="action-panel">Action Panel</div>
        <div className="map">Mapbox</div>
        <div className="footer-panel">Footer</div>
      </Main>
    </Scene>
  );
}

export default App;