Cheat Sheet Grid

I’m trying to work on my Cheat Sheet and I’m satisfied with the HTML so I’m trying to set up a grid where my tables can be in a “A A”
“B B”
. But whatever I try just winds up not working and I wind up with a disaster on my hands. How would I best go about creating this style I want?


Maybe try this:

  • put all <div class="table> into <main>
  • use css as below:
    background-color: gray;
    font-family: Helvetica, sans-serif;
    text-align: center;
    align-items: center;
    margin: 0 auto;
    border: 2px solid black;

main {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(3,1fr);

Not only was that what I needed but you actually helped me realize a second issue, I wasn’t using a main tag for everything after the header. Thanks!