Reviewing CSS Grid by drawing a Go board

This morning's task at work was centering a set of split buttons, and to do that I had no choice but to use grid.

I hadn't used grid in a while, so it wasn't easy, and I drew a Go board to review it once more.

The code for the Go board is below.

jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36import { styled } from "styled-components";

function App() {
  return (
    <GridBody>
      <div>·</div>
      <div></div>
      <div></div>
      <div></div>
      <div>·</div>
      <div></div>
      <div></div>
      <div></div>
      <div>·</div>
    </GridBody>
  );
}

export default App;

const GridBody = styled.div`
  width: 50%;
  height: 70vh;
  border: 1px solid black;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);

  > div {
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10rem;
  }
`;

Reviewing CSS Grid by drawing a Go board

More in Tech notes