CSS Grid

grid layout은 flexbox과 유사합니다.

하지만 flexbox는 여러개의 item들이 주축에만 존재합니다.

반면, grid는 2차원 구조로, 컨테이너 내에 격자형으로 item들을 집어넣을 수 있습니다.

 

 

 

grid의 구성

   - grid는 행을 뜻하는 row와 열을 뜻하는 column, 그리고 행과 열 사이의 공백을 의미하는 gutters 가 존재합니다.

 

 

 

grid layout 사용하기

/* 1. 2행 3열 그리드 레이아웃 */
.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* 2. grid-template-area로 세부 설정하기 */
.container-grid-area{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3,1fr);
    grid-template-areas:
    "area1 area3 area3"
    "area1 area2 area2"
    "area1 area2 area2";
    width: 150px;
    height: 150px;
    border: 5px dashed teal;
    background-color: aqua;
}
.area1{
    border: 2px solid orange;
    background-color: red;
    color: blue;
    font-size: 30px;
    grid-area: area1;
}
.area2{
    border: 2px solid orange;
    background-color: blue;
    color: orange;
    font-size: 30px;
    grid-area: area2;
}
.area3{
    border: 2px solid orange;
    background-color: green;
    color: white;
    font-size: 30px;
    grid-area: area3;
}

<!- HTML -->
1.
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
2.
<div class="container-grid-area">
    <div class="area1">1</div>
    <div class="area2">2</div>
    <div class="area3">3</div>
</div>

실행화면

   - display : grid; 선언 후 columns 와 rows 로 각 행과 열의 개수, 길이 비율 등을 설정합니다.

   - grid-template-rows & grid-template-columns

      : grid 레이아웃의 행과 열의 길이를 설정합니다.

      : 입력한 단위의 개수만큼 행과 열의 개수가 정해지며,  각 값들은 해당 행/열의 길이가 됩니다.

  - grid-template-areas:

      : grid 내 item들을 임의대로 설정할 수 있습니다. 단, 직사각형 상태를 만들어야 됩니다.

      : item 들에 grid-area로 이름을 연결해주어야 하며, width와 height를 설정하지 않아야 합니다.

   - gap (row-gap & column-gap)

      : grid의 행과 열 간 간격 (gutters) 의 길이를 지정해줍니다.

      : 오래된 버전을 지원하는 브라우저에는 grid-row-gap과 같이 grid를 앞에 붙여줍니다.

   - grid-auto-rows & grid-auto-columns

      : grid-template 에서 지정한 개수보다 더 많은 items 들이 존재 시, 해당 값의 크기를

        암시적으로 지정해주는 속성입니다.

   - grid-auto-flow

      : grid에 item들이 적용되는 방식을 지정하는 속성입니다.

      : dense값을 추가 시 이전 빈 공간에 맞는 item이 존재 시 순서를 무시하고 빈공간을 채울 수 있습니다. 

   - grid ( shorthand )

/* 명시적 사용 */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/* row는 명시적 입력 / column은 암시적입력 사용 */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/* row는 암시적 입력 / column은 명시적 입력 사용 */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

/* Global values */
grid: inherit;
grid: initial;
grid: revert;
grid: revert-layer;
grid: unset;

      : grid 레이아웃에 대한 단축속성입니다.

      : template 등 명시적인 속성과 auto 등의 암시적인 속성을 한번에 설정합니다.

      : [ rows 관련 속성 ] / [ columns 관련 속성] 의 형식으로 적습니다.