grid

그리드는 파이어폭스로 테스트하는 것이 좋다.

왜냐하면 눈에 보기 쉽게 나뉘어져 보이기 때문.

 

그리드도 flex와 마찬가지로 content와 item으로 나뉘어져있다.

 

display:grid로 하면 block요소처럼 세로로 쌓여진다.

display:inline-grid로 하면 인라인요소처럼 되서 가로로 쌓인다.

 

<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 {
  border: 2px solid red;
  display:grid;
}

.container .item {
  border: 2px solid;
}

 

grid-template-rows : 행의 높이와 개수

grid-template-columns : 열의 너비와 개수

  grid-template-columns:100px 100px 50px; // 3개의 열 각 너비
  grid-template-rows:100px 50px 50px; // 3개의 행 각 높이

비율로 맞추고 싶다면 fr단위를 쓰면된다. 비율로 생각하면 쉽다.

grid-template-columns:1fr 1fr 1fr; 

그런데 1fr을 매번 3번 쓰기는 힘들기도 하고 실수할여지도 있다. 그래서

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

이런식으로 사용하는 것이 좋다.

* repeat을 사용할 때 일정 크기를 계속 반복하게 사용하고 싶다면 repeat(3, 100px 50px 50px) 이런 식으로 사용 가능하다.

 

추가로 선에 이름을 명시해서 선이름을 사용할 수 있다.

꼭 대괄호를 써줘야한다.

grid-template-rows : [first] 100px [second] 200px [third];

예시

<div class="container">
  <div class="item">header</div>
  <div class="item">main</div>
  <div class="item">main2</div>
</div>

.container {
  border: 2px solid red;
  display:grid;
  width: 300px;
  grid-template-columns:100px [first] 100px [second] 100px [third];
  grid-template-rows:repeat(3, 100px);
  grid-auto-columns:100px;
/*   grid-auto-flow:dense; */
}
.container .item {
  border: 8px solid;
}
.item:nth-child(1) {
  grid-column: second / third;
}

 

정렬

justify-content 주축

align-content 

 

---

그리드 아이템에 적용하는 속성

grid-column

grid-row

아래는 첫번째 아이템애 대해서 몇번까지 영역을 차지하게 할 것인지 설정하는 예시다.

개발자 환경에서 grid 아이콘을 클릭하면 영역이 보이는데 그것을 참고하면 된다.

주의할 점은 1~4를 할 때 1/4 이런식으로 슬래시가 들어간다는 것.

+ 1 / span 3 이런식으로도 쓸 수 있는데 span 숫자 이런것은 몇칸을 차지한다는 얘기다.

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

 

area를 이용한 영역잡기

<div class="container">
  <div class="item">header</div>
  <div class="item">main</div>
  <div class="item">aside</div>
  <div class="item">footer</div>
</div>

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

.item:nth-child(1) {
  grid-area:header;
}

.item:nth-child(2) {
  grid-area:main;
}

.item:nth-child(3) {
  grid-area:aside;
}
.item:nth-child(4) {
  grid-area:footer;
}

중간에 비우고싶으면 .을 넣으면 된다.

 

간격넣기

row-gap : 행과 행사이 간격을 넣는다. 원래는 간격이 아니고 선의 굵기.

column-gap : 열과 열사이 간격.

ex) row-gap:15px; 

gap:30px 15px // 이것과 같다.

 

앞에 grid- 접두사 붙이는 것

이건 폐기되었다. 근데 일부 버전의 브라우저 지원을 하려면 사용해야 될 수도있어서 알고만 있자.

 

 

암시적 행과 열의 크기 정의

명시적은 내가 컨트롤 할 수 있는 범위에서 크기를 지정하는 것이라면 암시적은 존재하지 않는 영역의 크기를 지정해줌으로서 밖으로 나가져버린 요소를 보이게 해주는 것.

grid-auto-rows:100px;

grid-auto-columns:100px;

 

* 알아두기만하자.

grid-auto-flow 속성을 이용해서 빈 공간을 자동으로 채워주는 기능을 수행할 수도 있다.

 

grid-area보다 더 좋은방법

.container {
  display:grid;
  width: 600px;
  grid-template:
    "header header header" 80px
    "main . aside" 350px
    "footer footer footer" 130px
    /2fr 1fr 1fr;
  
}
.item:nth-child(1) {
  grid-area:header;
}
.item:nth-child(2) {
  grid-area:main;
}
.item:nth-child(3) {
  grid-area:aside;
}
.item:nth-child(4) {
  grid-area:footer;
}

.item {
  border:1px solid red;
}

 

각 아이템의 정렬

justify-item 주축

align-item 

 

이외에도 그리드 관련되서 속성들이 더있다.

mdn 문서나 grid로 정리잘되있는 블로그를 추가 참고하자.