ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [CSS]CSS Grid가 뭘까? 이 글로 종결한다 - CodeHan의 코딩공부
    FrontEnd/CSS 2022. 8. 17. 16:03
    반응형

    CSS Grid 

    Flex는 한 방향 레이아웃 시스템이고
    Grid는 두 방향(가로 - 세로) 레이아웃 시스템이다.

     

    Grid의 기본적인 구조

    <div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    </div>
    부모 요소인 div.container를 Grid컨테이너라고 부르고,
    자식 요소인 div.item들을 Gid Item이라고 부른다.

    Grid Track : grid의 행 또는 열
    Grid Cell : 그리드의 한 칸을 가리킨다
    Grid Line : 셀을 구분하는 선(세로선)
    Grid Number : Grid라인의 각 번호(가로선)
    Grid Gap : Grid 셀 사이 간격
    Grid Area : Grid라인으로 둘러싸인 사각형 영역으로, 셀의 집합이다.

     

    grid-templete-row, grid-templete-columns : 그리드 형태 정의

     

    columns와 row의 비율 또는 크기를 표현하는 방법

    .container {
    grid-template-columns: 200px 200px 500px;
    /* grid-template-columns: 1fr 1fr 1fr */
    /* grid-template-columns: repeat(3, 1fr) */
    /* grid-template-columns: 200px 1fr */
    /* grid-template-columns: 100px 200px auto */}

    반응형


    minmax함수 

    minmax(100px,auto)는 최소 크기는 100px이며 최대는 자동으로 늘어나게 하는 설정이다.

    auto-fill : column의 개수를 미리 정하지 않고 가능한 갯수를 최대로 채운다(공간이 남을 수 있음)
    auto-fit : column의 갯수를 최대한 채우지만 남는 공간없이 채운다.

    Gap : 셀 사이의 간격을 설정한다
    row-gap : 10px, column-gap : 20px로 쓸 수 있으며,
    축약 시 gap : 10px 20px로 쓸 수 있다.(row > column 순)

    Row의 갯수를 알 수 없을때는 어떻게 설정해야 할까?
    grid-auto-columns와 grid-auto-rows를 사용한다.


    각 셀의 영역 지정 :

    .item:nth-child(1) {
    grid-column : 1 / 3;
    gird-row : 1 / 2;
    }
    gird-line 1~3번영역 + grid-num 1~2영역을 차지하는 코드이다.

     

    영역 이름으로 그리드 정의

    .container {
    grid-template-areas:
    "header header header"
    "   a    main    b   "
    "   .     .      .   "
    "footer footer footer";
    }
    마침표나 none으로 빈칸을 표현할 수 있다.
    item요소와 매치할 땐 아래와 같이 매치하면 된다.
    .header { grid-area: header; }
    .sidebar-a { grid-area: a; }
    .main-content { grid-area: main; }
    .sidebar-b { grid-area: b; }
    .footer { grid-area: footer; }

     

    정렬

    세로 방향 정렬
    align-items : strectch(꽉채우기) start(시작지점), center(가운데), end(끝)
    가로 방향 정렬
    justify-items : strectch(꽉채우기) start(시작지점), center(가운데), end(끝)
    두 개 함께 쓰기
    place-items : center start / 단축 속성으로 align > justify 순서다.
    하나의 값만 작성 시  두 속성에 모두 적용된다.

    아이템 그룹  정렬
    align-content / justify-content / place-content
    Gird 아이템들의 높이를 모두 합한 값이 Grid 컨테이너의 높이보다 작을 때 Gird아이템들을 통째로 정렬하는 속성이다.
    stretch(비율에 맞게 채우기) start(시작 지점 몰기) center(가운데로 몰기) end(끝으로 몰기) space-between(시작점에 붙어서 일정한 padding) 
    space-around(중간에 시작해서 일정한 padding) space-evenly(item과 외부의 모든 padding이 같음)

    개별 아이템 정렬
    align-self / justify-self / place-self
    개별 아이템을 정렬할 수 있는 속성으로 stretch, start, center, end가 있다.

    배치 순서 Order
    배치 순서를 결정하며 크게 유의미하지않다. 사용에 주의할 것.

    z-index
    position의 z-index와 동일하며 숫자가 클 수록 위로 올라온다.

    반응형

    댓글

Designed by Tistory.