[CSS] grid 정리 (1) : grid-template, gap, repeat(), minmax(), auto-fill

 

 

💡 grid layout : 격자 형태의 레이아웃을 만드는 2차원 레이아웃 방식

그리드 아이템의 배치와 정렬은 그리드 컨테이너 내부의 행과 열의 상호작용을 통해 결정된다!

그리드 방식은 컨테이너에 행 and 열을 제공한다. 행과 열을 동시에 제어해 요소를 배치할 수 있다!

 

그리드 컨테이너 : 그리드 방식으로 레이아웃을 결정할 요소

그리드 아이템 : 그리드 컨테이너 내부에서 그리드 방식으로 배치되는 요소

 

display : grid 기본적으로 블록 레벨

display : inline-grid 인라인 속성으로 쓰고 싶을 때!

 

시작해 보아요.

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

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
  border: 5px solid aquamarine;
}

li {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: lemonchiffon;
  border: 5px solid pink;
  border-radius: 10px;
}

.container {
  /* display: grid; */
  height: 300px;
}

 

⬇️ 컨테이너에 grid 속성이 없을 때와 있을 때!

 

💡 여러가지 설정을 알아보자.

✳️ grid-template-columns : 그리드 컨테이너의 트랙 중 열 트랙 내 아이템들의 크기를 지정한다.
(진행방향 ➡️)
여기서 트랙이란? 행 또는 열을 뜻한다!

✳️ grid-template-rows : 그리드 컨테이너의 트랙 중 행 트랙 내 아이템들의 크기를 지정한다.
(진행방향 ⬇️)

속성값	의미
none	기본값. 명시한 값이 없으므로 암묵적으로 값이 정해짐
수치	길이를 나타내는 음수가 아닌 값을 지정
그 외	다양한 키워드나 CSS 함수를 사용해 지정하기도 한다.

 

두 개의 열을 만들고 싶다면 위처럼 width값을 두 개 입력해 주면 된다! 물론 다 다르게도 가능

⬇️ 짠

.container {
  display: grid;
  height: 300px;

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

 

⬇️ % 로도 지정 가능 ~

grid-template-columns: 20% 80%;

 

⬇️⬇️🌟⬇️⬇️ 공간을 비율로도 나눌 수 있어!

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

1번이랑 4번이 100px 을 차지하고 있고, 남은 공간을 2번 5번 : 3번 = 1 : 2 이런 비율로 나눈다!

 

❗️⬇️ columns & rows 같이 써보자!

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

가로 2줄 세로 5줄을 입력해서 칸이 10개가 되었기 때문에, 다섯 칸은 비워진 상태!

 

⬇️ 세로 3줄로 변경!

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

 

✳️ gap(grid-gap) : 아이템 사이의 간격을 지정!
행에서의 간격과 열에서의 간격을 똑같이 지정할수도, 따로 지정할 수도 있다.
row-gap & column-gap 의 단축속성이다.

속성값	의미
normal	기본값. 명시한 값이 없는 기본적인 상태
수치	길이를 나타내는 값을 지정한다. 다양한 단위 사용 가능

 

gap: 10px;

 

⬇️ 행과 열의 갭을 따로 설정할 수 있다!

gap: 10px 30px;

 

💡 트랙 관련 함수를 알아보자.
:  그리드 컨테이너의 트랙(행과 열) 크기를 지정할 때 사용할 수 있는 유용한 함수들

속성값	의미
repeat()	반복되는 값을 자동으로 처리할 수 있는 함수
minmax()	최솟값과 최댓값을 각각 지정할 수 있는 함수
auto-fill & auto-fit	반응형을 고려해 사용할 수 있는 키워드들 (함수 X)

 

 

⬇️ repeat() : 원하는 행, 열의 갯수마다 크기를 지정하지 않아도 반복 값을 넣어줄 수 있다.

grid-template-columns: repeat(2, 100px); /* 행 갯수 2개 100px 씩 */
grid-template-rows: repeat(3, 100px); /* 행 갯수 3개 100px 씩 */

gap: 10px;

 

❗️여기서 크기 값을 1fr 로 넣어주면 ~ 공간 내 전부 1 : 1 비율로 맞춰진다!

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

 

⬇️ minmax() : 크기의 최솟값과 최댓값을 정해둘 수 있다!

창을 줄이거나 늘려도 최솟값보다 작아지거나 최댓값보다 커지지 않는다.

grid-template-columns: repeat(2, minmax(100px, 200px));
grid-template-rows: repeat(3, 1fr);

 

❗️그런데.. 최댓값을 px 로 지정하니 창을 키웠을 때 공간이 남는다.

이럴 땐 최댓값에 1fr 이나 auto 를 넣어준다!

grid-template-columns: repeat(2, minmax(100px, auto));
grid-template-rows: repeat(3, 1fr);

 

⬇️ auto-fill : 트랙의 최소 길이의 합보다 컨테이너가 길어졌을 경우, 빈 공간을 남긴다.

grid-template-columns: repeat(auto-fill, minmax(100px, auto));

 

⬇️ auto-fit : 트랙의 최소 길이의 합보다 컨테이너가 길어졌을 경우, 빈 공간을 다 채운다.

하지만 여기서 최댓값 부분인 auto 를 값으로 지정해 두면 그걸 초과해 커지지 않는다.

  grid-template-columns: repeat(auto-fit, minmax(100px, auto));