[html][css] grid 에 대해서 / display /grid-template-rows/ grid-template-columns/grid-column/gird-template-areas/gap(grid-row-gap)

 display

grid container을 정의한다.

그리드를 사용하기 위해 필수적이다.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container{
  display: grid;
  width:300px;
  height:250px;
  border: 4px solid lightgray;
  
}
.item{
  border: 2px dashed red;
}

display: grid;는 블럭요소같은 grid를 만드는 것이다.

 display: inline-grid;

container의 css를 이렇게 바꾸면 inline요소 같은 grid가 만들어진다.

---

grid-template-rows

행이 몇개인지 정의하는 것

grid-template-columns

열이 몇개인지 정의하는 것

 

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container{
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 1fr 1fr;
  border: 4px solid lightgray;
  
}
.item{
  border: 2px dashed red;
}

열이나 행을 2개 하고 싶으면 2라고 쓰는 것이 아니라 크기를 어떻게 할 것인지 적고 띄워쓰기로 그 개수를 정한다.

위에 정의한 것은 행과 열 둘다 2개이다.

행은 크기를 정해주었고

column은 1fr 1fr이라고 했는데 그것은 1:1비율로 container을 꽉차게 사용한다는 뜻이다.

 

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

행이나 열을 계속 늘려나가면 헷갈릴 수도 있으니 repeat함수를 사용한다.

repeat(몇 번 반복할 건지, 무슨 단위를 반복할 건지)

적으면 된다.

 

---

grid-column

firefox브라우저 개발자도구

<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 class="item">6</div>
</div>

.container{
  width:600px;
  display: grid;
  grid-template-rows: repeat(4,100px);
  grid-template-columns: repeat(4,1fr);
  border: 4px solid lightgray;
  
}
.item{
  border: 2px solid red;
  font-size:30px;
}
.item:nth-child(1){
  grid-column: 1/4
}

grid-column으로 1번에서 4번까지 확장하겠다 했기에 4번까지 확장되었다.

.item:nth-child(1){
  grid-column: 1/4;
  grid-row: 1/3;
}
.item:nth-child(4){
  grid-row:4/5;
  grid-column:-1/-3;
}

1번은 row는 1번에서부터 3번으로 확장한다 했으니 행의 크기가 늘어났다.

item 4번은 행이 4번에서부터 5번에 위치한다했으니 맨 밑에 칸에 위치했고

열이 -1번에서 -3에 위치한다했으니 오른쪽에서부터 시작했다.

 

---

gird-template-areas

지정된 그리드 영역 이름 grid-area을 참조해 그리드 템플릿을 생성합니다.

<div class="container">
  <div class="item header">HEADER</div>
  <div class="item main">MAIN</div>
  <div class="item aside">ASIDE</div>
   <div class="item footer">FOOTER</div>

</div>

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "main main aside"
    "footer footer footer";
}
.item{
  border:10px solid red;
}
.header { grid-area: header; }
.main   { grid-area: main;   }
.aside  { grid-area: aside;  }
.footer { grid-area: footer; }

 

 

---

row-gap(grid-row-gap)

각 행과 행 사이의 간격을 지정한다.

더 명확하게는 그리드 선의 크기를 지정한다는 뜻이다

 

위의 예제에서 container css를 바꾸어 주었다.

.container {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "main . aside"
    "footer footer footer";
  row-gap:30px;
  column-gap: 15px;
}