Grid Layout- 그리드1

 Grid  

-flex처럼 레이아웃에 유용하게 쓰임.

-flex는 1차원(가로 or 세로)적인 것에 반면, grid는 2차원 두방향(가로, 세로)이 가능하다.

-때문에 복잡한 레이아웃 표현이 가능하다.

 

---

Container (부모요소) 속성

display : grid || inline-grid
grid-template-columns          :세로줄나누기  
grid-template-rows               :가로줄나누기
grid
grid-column-gap(column-gap) :세로 간격 설정
grid-row-gap(row-gap)           :가로 간격 설정
grid-gap                              :세로 가로 간격 축약
justify-items                         :가로정렬
align-items                          :세로정렬
justify-content                      :아이템 그룹 가로 정렬
align-content                       :아이템 그룹 세로 정렬

 

Item (자식요소) 속성

justify-self              :개별 아이템 가로 정렬
align-self               :개별 아이템  세로 정렬
gird-column-start
gird-column-end
gird-column
grid-row-start
grid-row-end
grid-row
grid-are
order                    :배치순서

 

 

+repeat 함수 (반복횟수, 반복값)

grid-template-columns: repeat(4, 1fr);
/* grid-template-columns: 1fr 1fr 1fr 1fr */

 

---

[grid 통합해서 쓰기]
grid-area : 시작가로/시작세로/ 끝가로/끝세로 
-ex1) grid-area:1/2/5/6;
-span활용한 ex2) grid-area: 2/1/ span 2 /span 3; >>시작점 가로와 세로, span각 설정

 

예제1

<div class="container container4">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
 </div>
 
 <style>
 .container4{
   width: 400px;
   height: 400px;
   display: grid;
   background-color: rgb(185, 181, 175);
 }
 .container4>div{
   background-color: beige;
   margin: 10px;
   text-align: center;
   border-radius: 5px;
 }
 .container4>div:nth-child(1){
   grid-area: 1/1/2/2;
 }
 .container4>div:nth-child(2){
    grid-area: 1/2/2/3;
 }
 .container4>div:nth-child(3){
    grid-area: 2/1/3/2;
 }
 .container4>div:nth-child(4){
    grid-area: 2/2/3/3;
 }
/* 시작은 모서리왼쪽위,끝은 오른쪽모서리아래 */
 </style>

 

1

2

3

4

---

예제2

<div class="container2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div class="select">8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>  
</div>
    
<style>
.container2{
  border: 5px solid #000;
  background-color: rgb(216, 114, 114);
  height: 300px;
  display: grid;
  grid-gap:10px;
  grid-template-columns: auto auto auto auto auto auto;
 }
.container2>div{
   background-color: #fff;
   text-align: center;
 }
 .container2>div.select{
 /*  grid-column: 2/ span 4; */
 /*  grid-row: 1 /span 4; */
   background-color: rgb(193, 203, 222);          
 /* grid 통합해서 쓰기 */
 /* grid-area:시작가로/시작세로/ 끝가로/끝세로 */
 grid-area:1/2/5/6;
}
</style>

 

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15