[CSS] grid

Grid 이해하기

const Grid = styled.div`
  position: relative;
  display: grid;
  width: 450px;
  height: 450px;
  border: 3px solid gray;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);

  place-content: start start;
  place-items: center center;

  /* align-content: end; */
  /* justify-content: end; */

  /* align-items: start; */
  /* justify-items: space-evenly; */
`;

const GridArea = styled.div`
  display: grid;
  grid-template-rows: repeat(4, 90px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    'header header header'
    'main main aside'
    'main main .'
    'footer footer footer';
  border: 3px solid red;

  & :nth-child(1) {
    grid-area: header;
  }

  & :nth-child(2) {
    grid-area: main;
  }

  & :nth-child(3) {
    grid-area: footer;
  }
  & :nth-child(4) {
    grid-area: aside;
  }
`;
const GridItem = styled.p`
  font: bold 10px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 0px;
  /* line-height: 100px; */
  vertical-align: middle;
  border: 1px solid blue;
`;