[03/07] TIL

송승찬·2020년 3월 6일
0

CodeSquad_TIL

목록 보기
8/14

Grid

  1. flex=>1차원의 요소 배치(한 방향으로만 정렬) / grid=>2차원 요소 배치(x,y축 동시에 정렬 가능)
  2. 사용법 =>container에 grid줘야
    ref :https://www.youtube.com/watch?v=jV8B24rSN5o&list=PLillGF-RfqbZTASqIqdvm1R5mLrQq79CU&index=5

    .wrapper {
    display:grid;
    grid-template-columns:50% 20% 30%;
    grid-template-coulmns :repeat(3,1fr 2fr) =>1fr 2fr 3번 반복 배치
    grid-row-gap :1rem;
    grid-gap:1rem 2rem (row-gap, column-gap순서)
    grid-auto-rows : minmax(100px,auto)=>행 높이 최소 100,오버 되면 자동으로 컨텐츠 높이에 맞춰짐
    grid-column : 1/3;
    grid-row : 2/4;
    grid-row :3 =>3행부터 끝까지 공간 차지
    이 값 주는 것 따라 요소들의 순서를 바꿔서 줄 수도 있다
    justify-items vs justify-contents (flex)
    align-items => 전체 배치에 적용
    jusitfy-self, align-self=>특정 요소에 배치에만 적용
    }

profile
superfly

0개의 댓글