ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • CSS display grid 알아보기
      Web-app/CSS 2023. 10. 28. 14:51
      728x90

      mozilla의 CSS grid layout 문서를 참고해서 grid 에 대해 알아봅시다👨‍💻

       

      Grid란?

      행과 열의 교차된 집합으로, elements는 grid에 배치될 수 있습니다.

       

      ✔ CSS Grid의 특징

      부모 container에 display: grid 또는 display: inline-grid 적용, children은 grid items가 됩니다.

      크롬의 개발자 모드에 Layout에서 row, column의 구조를 알 수 있습니다.

          <body>
        <div class="container">
            <div class="box container1">container1</div>
            <div class="box container2">container2</div>
            <div class="box container3">container3</div>
            <div class="box container4">container4</div>
            <div class="box container5">container5</div>
            <div class="box container6">container6</div>
        </div>
    </body>
      html{
    height: 100%;
}
body{
    height: 100%;
}
.container{
    display: inline-grid;
    height: 100%;
}

.box{
    border: 3px black solid;
    padding: 8px;
}

       

      ✔ CSS Grid 구성하기

      grid에서 열과 행을 정의하기 위해 grid-template-rows 와 grid-template-columns property를 사용합니다.

      이 property를 직접 이용해서 만들어진 grid : explicit grid

      직접 정의하지 않더라도 미리 정의된 property에 의해 자동으로 만들어지는 grid : implicit grid

       

      - 고정된 값 사용하기

      html{
    height: 100%;
}
body{
    height: 100%;
}
.container{
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 100px 100px;

    height: 100%;
}

.box{
    border: 3px black solid;
    padding: 8px;
}

      - 상대적인 값 사용하기

      .container{
    display: grid;
    grid-template-columns: 200px 30% 1fr;
    grid-template-rows: 100px 100px;

    height: 100%;
}

      fr (fraction) 단위는 grid container의 available space 의 일부분

      fr가 유일하면 available space를 모두 차지, fr가 2개 이상 있다면 available space를 각각에서 정의된 비율로 차지

       

       

      - repeat 사용하기

      .container{
    display: grid;
    grid-template-columns: 200px 30% 1fr;
    grid-template-rows: repeat(2, 30%);

    height: 100%;
}

       

      ✔ grid-auto-rows 를 이용해서 row의 넓이를 지정 가능 (cell의 height)

      ex) grid-auto-rows : minmax(100px, auto);

      Grid line의 구조 & Cell이 차지하는 영역 지정하기

      ✔ grid line을 이용해서 지정하기

       

      Grid line은 읽기 모드에 따라서 

      left-to-right 언어이면 왼쪽 가장자리부터 1

      right-to-left 언어이면 오른쪽 가장자리부터 1

       

      부여된 line의 숫자를 이용해서 Cell이 차지하는 영역을 지정 가능

       - grid-column-start : Cell의 column 이 시작하는 곳을 지정

       - grid-column-end : Cell의 column 이 끝나는 곳을 지정

       - grid-row-start : Cell의 row가 시작하는 곳을 지정

       - grid-row-end  : Cell의 row가 끝나는 곳을 지정

       - (축약형) grid-column : grid-column-start / grid-column-end

       - (축약형) grid-row : grid-row-start / grid-row-end

       - (축약형) grid-area : grid-row-start / grid-column-start / grid-row-end / grid-column-end

       

      ✅ 이때 음수 값을 쓰면 마지막 Line으로부터 선택 가능 ex) grid-column: 1 / -1;

      ✅ span을 이용해 첫번째 값으로 부터 Cell을 얼마나 차지할지 결정할 수 있음. ex) grid-row : 2 / span 2;

      ✅ content는 겹쳐질 수 있으며 각 grid items의 z-index로 조절

       

      .container{
    display: grid;
    grid-template-columns: 200px 30% 1fr;
    grid-template-rows: repeat(3, 30%);
    height: 500px;
}

.box{
    border: 3px black solid;
    padding: 8px;
}

.container4{
    grid-row-start: 2;
    grid-row-end: 4;
}

.container5{
    grid-column-start: 2;
    grid-column-end: 4;
}

      ✔ grid line에 이름을 부여해서 지정하기

      grid-template-columns, grid-template-rows에서 지정한 크기 앞뒤로 [] 안에 이름을 지정, 여러개 지정 가능

      .container{
    display: grid;
    grid-template-columns: [column1-start] 200px [column1-end column2-start] 30% [column2-end column3-start] 1fr [column3-end];
    grid-template-rows: [row1-start] 3rem [row1-end row2-start] 2fr [row2-end row3-start] 1fr [row3-end]; 

    height: 500px;
}

.box{
    border: 3px black solid;
    padding: 8px;
}

.container1{
    grid-column: column1-start / column3-end;
}

.container2{
    grid-row: row2-start / row3-end;
}

.container3{
    grid-column: column2-start / column3-end;
}

.container4{
    grid-column: column2-start / column3-end;
}

       

      repeat를 이용할 시 children에 지정한 이름 (띄우고) 숫자를 적어주면 모든 영역 이름을 지어주지 않더라도 사용 가능

      .container{
    display: grid;
    grid-template-columns: repeat(3, [col-start] 1fr [col-end]);
    grid-template-rows: repeat(3, [row-start] 1fr [row-end]);

    height: 500px;
}

.box{
    border: 3px black solid;
    padding: 8px;
}

.container1{
    grid-column: col-start 1 / col-end 3;
}

.container2{
    grid-row: row-start 2 / row-end 3;
}

.container3{
    grid-column: col-start 2 / col-end 3;
}

.container4{
    grid-column: col-start 2 / col-end 3;
}

       

       

      ✔ grid-area를 이용해서 지정하기

      부모 container에 grid-template-areas 에 정의, 만약 채우고 싶지 않으면 . 으로 표시

      children에 grid-area로 지정해준 영역 이름 적어주기

      .container{
    display: grid;
    grid-template-columns: 200px 30% 1fr;
    grid-template-rows: 3rem auto;
    grid-template-areas: "header header header" 
                         "sidebar main1 main1"
                         "sidebar main2 main2";
    height: 500px;
}

.box{
    border: 3px black solid;
    padding: 8px;
}

.container1{
    grid-area: header;
}

.container2{
    grid-area: sidebar;
}

.container3{
    grid-area: main1;
}

.container4{
    grid-area: main2;
}

       

       

       

      ✔ Column, Row 사이 Gap 지정하기

      부모 container에 column-gap, row-gap 지정

      축약형도 가능 ex) gap : 1rem 1.5rem;

      .container{
    display: grid;
    grid-template-columns: 200px 30% 1fr;
    grid-template-rows: repeat(3, 30%);
    height: 500px;
    column-gap: 1rem;
    row-gap: 1.5rem;
}

.box{
    border: 3px black solid;
    padding: 8px;
}

.container4{
    grid-row-start: 2;
    grid-row-end: 4;
}

.container5{
    grid-column-start: 2;
    grid-column-end: 4;
}

      ✔ Grid 안 Grid 도 가능

      .container6{
    display: grid;
    grid-template-columns: 20% 30% 40%;
}

      grid layout에서의 정렬

      ✔ grid layout에서의 두 축

      1) Block Axis : align-items, align-self, align-content property가 컨텐츠의 block axis 의 정렬을 결정

      2) Inline / Row Axis : justify-items, justify-self, justify-content property가 컨텐츠의 inline axis의 정렬을 결정

      ✔ align-items

      부모 container에 적용되며, 각 cell 마다 block axis를 따라 어떻게 정렬될지 정함.

      ✔ align-self

      children에 적용되며, 각 children에 align-items옵션을 따로 적용할 수 있음.

      .container{
    display: grid;
    grid-template-columns: repeat(3, [col-start] 1fr [col-end]);
    grid-template-rows: repeat(3, [row-start] 1fr [row-end]);

    height: 500px;
    align-items: auto;
}

.box{
    border: 3px black solid;
    padding: 8px;
}

.container1{
    align-self: end;
}

       

      ✔ justify-items

      부모 container에 적용되며, 각 cell 마다 inline axis를 따라 어떻게 정렬될지 정함.

      ✔ justify-self

      children에 적용되며, 마찬가지로 각 children에 align-items옵션을 따로 적용할 수 있음.

      ✔ align-content

      부모 container에 적용되며, 전체 grid가 inline axis를 기준으로 어떻게 정렬될지 정함. flex box에서 사용했던 옵션들과 유사함.

       

      ✔ justify-content

      부모 container에 적용되며, 전체 grid가 block axis를 기준으로 어떻게 정렬될지 정함. flex box에서 사용했던 옵션들과 유사함.

      .container{
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    grid-template-areas: "a b ."
                         "c d ."
                         ". . .";
    height: 500px;
    justify-content: last baseline;
    /* align-content: space-between; */

}

.box{
    border: 3px black solid;
    padding: 8px;
}

.container1{
    grid-area: a;
}
.container2{
    grid-area: b;
}
.container3{
    grid-area: c;
}
.container4{
    grid-area: d;
}

      justify-content

      Reference

       

      Basic concepts of grid layout - CSS: Cascading Style Sheets | MDN

      CSS grid layout introduces a two-dimensional grid system to CSS. Grids can be used to lay out major page areas or small user interface elements. This article introduces the CSS Grid Layout and the new terminology that is part of the CSS Grid Layout Level 1

      developer.mozilla.org

       

      728x90

      'Web-app > CSS' 카테고리의 다른 글

      CSS display flex에 대해 알아보기  (0) 2023.10.27
      CSS font 중요한 property에 대해 알아보기  (0) 2023.10.22
      CSS 상대단위 rem, em 알아보기 & viewport 에서의 단위 vw, vh, vmin, vmax 알아보기  (0) 2023.10.13
      CSS background 에 image 넣기 & 옵션 설정하기  (0) 2023.10.09
      CSS property float와 clear 알아보기  (0) 2023.10.09

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바