[TIL] Grid 사용

Fact (사실: 무슨 일이 있었나?) Feeling (느낌: 무슨 느낌이 들었나?) Finding (배운 점: 어떤 인사이트를 얻었나?) Future action (향후 행동: 앞으로 무엇을 해야 할까?) Feedback (피드백: 앞서 정한 향후 행동을 실천해본 뒤, 이에 대해 어떤 피드백을 받았나?)

3. Finding

- CSS : Grid

- Flex와 비교해봤을 때, Grid로 화면을 구성하는 게 장점이 크다 판단, Gird를 통해 화면을 구성해보기로 했다

- Grid의 장점

1) 2차원임

: Flex는 1차원적으로 구성되지만, Grid를 사용하면 2차원적으로 사용할 수 있음

2) gap 주기가 좋음, 즉 간격설정하기가 좋음

: 직접 사용해보며 느낀 건데, flex와 달리 행열사이에 모두 gap을 균일하게 줄 수 있다는 점이 좋았음 flex에서는 margin으로 해야했을 일인데

3) 반응형 웹 만들기 좋음

- 그리고 flex랑 걍 합쳐서 쓰면 됨. 그니까 화면 배치와 구성하는데 최적화되었다는 말임

 

- 사용방법: 아래 사이트 참고함

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

 

- 직접 활용한 내용

<GridBox $gtc="repeat(auto-fill, minmax(25%, auto))" $gar="minmax(200px, auto)">

    <GridMergedSpaceFlex $mergedgcs={2} $mergedgce={5} $mergedgrs={4} style={{ backgroundColor: "red" }}>나요 </GridMergedSpaceFlex>
    <FlexBox style={{ backgroundColor: "lightcoral" }}>아</FlexBox>
    <FlexBox style={{ backgroundColor: "lightcoral" }}>아</FlexBox>
    <FlexBox style={{ backgroundColor: "lightcoral" }}>아</FlexBox>
    <FlexBox style={{ backgroundColor: "lightcoral" }}>아</FlexBox>
    <FlexBox style={{ backgroundColor: "lightcoral" }}>아</FlexBox>
    <FlexBox style={{ backgroundColor: "lightcoral" }}>아</FlexBox>
    <FlexBox style={{ backgroundColor: "lightcoral" }}>아</FlexBox>
    <FlexBox style={{ backgroundColor: "lightcoral" }}>아</FlexBox>
    <FlexBox style={{ backgroundColor: "lightcoral" }}>아</FlexBox>
    <FlexBox style={{ backgroundColor: "lightcoral" }}>아</FlexBox>
    <FlexBox style={{ backgroundColor: "lightcoral" }}>아</FlexBox>
    <FlexBox style={{ backgroundColor: "lightcoral" }}>아</FlexBox>
    <FlexBox style={{ backgroundColor: "lightcoral" }}>아</FlexBox>

</GridBox>

styled로 정의해놓은 것들을 사용함. 아래와 같이

const GridMergedSpace = sc.styled.div<Partial<Styled>>`
  grid-column-start: ${({$mergedgcs}) => $mergedgcs ? $mergedgcs : "auto"};
  grid-column-end: ${({$mergedgce}) => $mergedgce ? $mergedgce : "auto"}; // span 2;
  grid-row-start: ${({$mergedgrs}) => $mergedgrs ? $mergedgrs : "auto"};
  grid-row-end: ${({$mergedgre}) => $mergedgre ? $mergedgre : "auto"}; // span 3;
`

- 연습한 영상

이런 식으로, 위치만 잘 지정해주면 얘가 알아서 휙휙 자리를 바꾼다 똑똑함;;