Grid를 사용해봤다. CSS는 어려운 아이이다.

내가 하고자했던 것은 아래와 같이 여러줄로 알아서 넘치면서도 첫번째부터 알아서 컨텐츠가 차고, 그다음에 간격은 알아서 적당히 구해주는 것을 구현하고 싶었다(반응형 크기 구하고 하는게, 구현은 할 수 있어도 내가 계획을 잡는게 너무 어려워서...ㅠㅠ 마크업 개발자 및 디자이너분들이 정말 대단하다고 생각하는 부분)

 

 

예전에는 그냥 flex로 막했었는데, 이번에는 그렇게 했더니 한개씩 컨텐츠가 넘칠때 이상하게 보였다. 마지막 줄의 컨텐츠가 자기혼자 가운데에 정렬되거나 하는식이었다. 

 

그래서 찾다보니 Grid라는게 있다는 것을 알게 되었고, 아직 잘 이해한 것은 아니지만 내가 원하는 바는 구현할 수 있었다. 

 

 

const CardLayoutWrapper = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, 250px); // 칼럼의 크기를 구하는 것, auto-fill을 통해서는 채울수 있는만큼 반복해서 column을 채운다
  gap: 10px; // gap을 줄수있다
  grid-auto-rows: 300px; // 행의 높이를 지정
  justify-content: space-between; // flex에서 알아서 간격 배치되는것
`;

// 카드의 크기
const Card = styled.div`
  width: 250px; 
  height: 300px;
  border: 1px solid black;
`;

const CardLayout = ({ contents }) => {
  return (
    <CardLayoutWrapper>
      {contents.map(
        (
          d: { frontmatter: { title: React.ReactNode; slug: string } },
          id: React.Key
        ) => {
          return (
            <Card key={id}>
              {d.frontmatter.title} <Link to={d.frontmatter.slug}>읽기</Link>!
            </Card>
          );
        }
      )}
      <Card>내용</Card>
      <Card>내용</Card>
    </CardLayoutWrapper>
  );
};

 

고정된 카드의 크기를 알아서 넘치도록 보이게 하기 위해서 자료를 찾아봤다. 

 

auto-fill 속성은 잘 이해가 되지 않아, 이 글 - Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit` -을 참고 했다.

 

제일 도움이 많이 됬던 글은 A Complete Guide to Grid 이글이다. 

 

 

다음엔 Layout관련해서 좀더 공부를 해봐야겠다.