📌소개

강의링크 바로가기

📌배운내용 정리

반응형 디자인 by_chakra

// file : my-app\src\routes\Home.tsx
export default function Home() {
  return (
    <Grid
      mt={10}
      px={{
          // 화면크기에 따라서 padding x size 를 조절하는 코드
        base: 10, // 😍 base 는 mobile size 를 의미합니다.
        lg: 40, // 😍 lg 는 큰 화면을 의미합니다. 
      }}
      columnGap={4}
      rowGap={8}
      templateColumns={{
        sm: "1fr",
        md: "1fr 1fr",
        lg: "repeat(3, 1fr)",
        xl: "repeat(4, 1fr)",
        "2xl": "repeat(5, 1fr)",
      }}
    >

Link to Responsive Styles chakra Doc

📌Grab a Keyword

📌Grab a pocket