CSS) grid - grid-template-columns/grid-template-rows/ gap

 

📝참고자료

내가 사랑하는 유노코딩 선생님 강의 참고~!

https://www.youtube.com/watch?v=4pXTxo_CMJM&list=PLFeNz2ojQZjso4ZJVeeMWR72l8s9V8Ym9&index=9

https://www.youtube.com/watch?v=hMJw1kFLxWU&list=PLFeNz2ojQZjso4ZJVeeMWR72l8s9V8Ym9&index=10

 

✅grid layout

그리드 : 2차원 레이아웃 방식

 

그리드를 사용할 때는 그리드 컨테이너를 만든 후 

display:grid;를 지정해줘야함.

1) grid-template-columns
그리드 컨테이너 트랙(행 또는 열) 중 column트랙 내 아이템들의 크기를 지정할 수 있는 속성

2) grid-template-rows

그리드 컨테이너의 트랙 중 행(row)트랙 내 아이템들의 크기를 지정할 수 있는 속성

3) gap(grid-gap)

아이템 사이의 간격을 지정하는 속성

---

실습

html 코드 소스

<ul class="container">
      <li class="item">1</li>
      <li class="item">2</li>
      <li class="item">3</li>
      <li class="item">4</li>
      <li class="item">5</li>
</ul>

css 코드

*{
  box-sizing:border-box;
}
body{
  margin:0;
}
ul{
  padding:0;
  list-style-type:none;
  border:5px solid teal;
}
li{
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:beige;
  border:5px solid tomato;
  border-radius:8px;
}

결과창

 

 

css에 코드를 추가해본다.

주석을 없애보면서 실습해보자~

1) grid-template-columns : column이 가로방향로 추가되는 특징이 있다.

.container{
  display:grid;
  grid-template-columns: 100px 100px;
  /* grid-template-columns: 100px 1fr;
  grid-template-columns: 100px 2fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-columns:1fr 2fr; */
}

 

 

 

- grid-template-columns: 100px 100px;

 

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

fr: 사용할 수 있는 공간(남아있는 공간) 에서 비율로 나누겠다.

1fr: 남아있는 공간을 자기가 다 차지한다.

즉, grid-template-columns: 100px 1fr;

2개의 열이 있는데 한 열은 100px은 미리 공간을 차지해놓은 채 1fr은 나머지 공간을 2번째 열이 다 차지한다는 뜻

- grid-template-coulmns: 1fr 1fr 1fr;

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

 

 

2) grid-template-rows: row가 세로방향로 추가되는 특징이 있다.

CSS 코드판

.container{
  display:grid;
  height:500px;
  grid-template-rows:200px 200px 200px;
  grid-template-rows:200px 1fr;
  }

 

 

- grid-template-rows:200px 200px 200px;

- grid-template-rows:200px 1fr;

3) gap 

아이템 사이의 간격을 말함

.container{
  display:grid;
  height:500px;
  grid-template-columns:200px 200px 200px;
  grid-template-rows:200px 1fr;
  gap:20px;
}