이노베이션-실전플젝
[TIL] Grid 사용
개린이다
2023. 8. 1. 14:10
|
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를 익혀보자
이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “
studiomeal.com
- 직접 활용한 내용
<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;
`
- 연습한 영상
이런 식으로, 위치만 잘 지정해주면 얘가 알아서 휙휙 자리를 바꾼다 똑똑함;;