2week-grid

CSS Grid는 CSS Flex 와 같이

Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분되어 있다.

Container는 Items를 감싸는 부모 요소이며, 그 안에서 각 Item을 배치할 수 있다.

• row(행)
• column(열)

grid-template-columns

display:grid;

//단축으로는 gtc/gtr(row)가 있다.
grid-template-columns: 40% 60%;
grid-template-columns: 4fr 6fr;(fr->fraction 분수)
gap:10px; //사이 여백 10 알아서 띄워줌.

grid-template-columns(rows):repeat(3,1fr)

display:grid;

grid-template-columns: repeat(1fr,1fr,1fr)
grid-template-columns : repeat(3,1fr)
밑에 형식이 더 편하다.

gap:10px //사이 여백 알아서 띄워줌
gap: 10px 20px; -> row column 합쳐서 가능

grid-row-gap: 10px;
grid-column-gap: 10px; //그리드 갭 따로따로 줄수있다

높이가 다른 콘텐츠들을 통일시켜줄때

grid-auto-rows: 200px;
grid-auto-rows: minmax(200px,auto)
//최소값은 200px이면서 늘어날 땐 오토로 인식

 <style>
      .box3{
        padding: 10px;
        margin: 10px 0;
      }
      .box3 ul{
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(2,auto);
      }
      .box3 ul li{
      }
      /* a한테 flex먼저주고 fxdc으로 바꾸면 인라인블럭효과를 먹일수있따*/
      .box3 ul a{
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 10px;
        background: #ccc;
      }
      .box3 ul img{
      }
      .box3 ul strong{
        background: #fff;
      }
      .box3 ul p{
        background: #fff;
      }
    </style>