Grid 복습

오늘의 아침 업무는 나뉜 버튼을 중앙정렬 하기 위해선 grid를 사용할 수밖에 없었다.

오랜만에 접해보는 grid이다 보니 사용하는데 쉽지 않아서 다시 한번 복습을 해볼까 바둑판을 그려보았다.

바둑판의 코드는 아래와 같다.

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;
  }
`;

기술 정리의 다른 글