1. gap
그리드 셀 사이의 간격을 설정하는 데 사용된다.
gap 속성은 row-gap과 column-gap의 단축 속성으로, 행과 열 사이의 간격을 한 번에 설정할 수 있다.
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
gap: 20px 10px; /* 행 간격: 20px, 열 간격: 10px */
}
.grid-item {
background-color: #eee;
padding: 20px;
text-align: center;
border: 2px black solid;
}위의 코드대로 gap: 20px 10px로 설정하면 왼쪽 이미지처럼 50px 20px로 설정하면 오른쪽 이미지처럼 된다.
이처럼 gap은 행과 열간의 간격을 조정하는 역할을 한다.
2. grid-template-rows / grid-template-columns
각각 행과 열의 크기를 정의하는 속성이다.
행과 열의 크기를 정해서 전체적인 구조를 설정한다. 흔히 말하는 템플릿이라고 말하며 정해진 구조에 따라서 내용만 채워넣는 방식과 비슷하다고 할 수 있다.
template 속성은 그것과 비슷하게 행과 열의 크기를 정해서 레이아웃의 틀을 설정하는 속성이다.
1. 고정 크기 단위 사용 (픽셀, px)
HTML
<body>
<div class="grid-container01">
<div class="hb1"><span class="h1">colums</span>
<div class="grid-container101">
<div class="grid-item">50px</div>
<div class="grid-item">100px</div>
<div class="grid-item">auto</div>
<div class="grid-item">50px</div>
<div class="grid-item">60px</div>
<div class="grid-item">70px</div>
</div>
</div>
<div class="hb1"><span class="h1">rows</span>
<div class="grid-container102">
<div class="grid-item">50px</div>
<div class="grid-item">100px</div>
<div class="grid-item">auto</div>
<div class="grid-item">50px</div>
<div class="grid-item">60px</div>
<div class="grid-item">70px</div>
</div>
</div>
</div>
</body>
CSS
.hb1{text-align:center;
width: fit-content;
height: fit-content;
}
.h1{font-size: 30px;
}
.grid-container01 {
width: fit-content;
height: fit-content;
display: grid;
grid-template-columns: repeat(2, 500px);
}
.grid-container101 {
display: grid;
grid-template-columns: 50px 100px auto 50px 60px 70px ;
}
.grid-container102 {
display: grid;
grid-template-rows: 50px 100px auto 50px 60px 70px;
}
.grid-item {
background-color: #eee;
padding: 10px;
border: 2px black solid;
}위의 코드는 아래와 같은 이미지를 구현하는 코드이다.
grid-template-columns은 열의 너비(가로)를 각각 50px 100px auto 50px 60px 70px로 설정한다.
grid-template-row은 행의 높이(세로)를 각각 50px 100px auto 50px 60px 70px로 설정한다.
각각의 수치는 공백으로 구분할 수 있다.
2. 비율 단위 사용 (fr)
.grid-container {
display: grid;
grid-template-rows: 1fr 2fr; /* 2개의 행, 1:2 비율 */
grid-template-columns: 1fr 3fr 1fr; /* 3개의 열, 1:3:1 비율 */
}
fr 단위는 그리드 컨테이너 안에서 사용 가능한 공간의 비율을 나타낸다.
이 예시는 2개의 행과 3개의 열을 가진 그리드 레이아웃을 생성하며, 각 행과 열은 주어진 비율에 따라 크기가 자동으로 조절된다.
브라우저의 크기를 조정할 경우 브라우저의 크기 만큼 너비를 조정하게 된다.
row 높이가 1fr, 2fr이기 때문에 1행보다 2행의 크기가 2배가 크다.
3. 퍼센트 단위 사용 (%):
.grid-container {
display: grid;
grid-template-rows: 25% 75%; /* 2개의 행, 각각 컨테이너 높이의 25%, 75% */
grid-template-columns: 20% 60% 20%; /* 3개의 열, 각각 컨테이너 너비의 20%, 60%, 20% */
}기본적으로 높이가 결정되지 않은 행의 경우 컨텐츠 높이의 합을 높이로 가진다. (1행 A 콘텐츠 높이 + 2행 D 콘텐츠 높이)
때문에 25% 75%를 줘버리면 아래 이미지와 같이 1번이 전체 높이의 25%만을 받아서 잘리게 된다.
(A와 D의 높이가 동일하기 때문에 A 자체 높이의 50%만을 가지게 된다)
문제 해결법
때문에 이런 문제를 해결하기 위해서는 컨테이너에 height: 200px; 등으로 명시적으로 높이를 정의해주면 해당 높이를 기준으로 각각 25% 75%로 나누게 된다.
(이 경우에도 높이가 너무 낮으면 해당 높이로 분배하기 때문에 컨텐츠가 잘리게 된다)
4. 반복 함수 사용 (repeat())
repeat라는 반복 함수를 사용해서 동일한 크기의 행, 열을 반복해서 생성할 수 있다.
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px); /* 3개의 행, 각각 100px 높이 */
grid-template-columns: repeat(4, 1fr); /* 4개의 열, 동일한 비율 */
}
이 예시는 3개의 100px 높이 행과 각각 1fr의 크기를 가진 열을 4개 만든 그리드 레이아웃을 생성합니다.
5. 자동 크기 조절 (auto)
.grid-container {
display: grid;
grid-template-rows: auto 100px auto; /* 첫 번째와 세 번째 행은 내용에 따라 자동, 두 번째 행은 100px */
grid-template-columns: 200px auto 1fr; /* 첫 번째 열은 200px, 두 번째 열은 내용에 따라 자동, 세 번째 열은 남은 공간 모두 차지 */
}
auto 키워드는 내용물의 크기에 따라 행 또는 열의 크기를 자동으로 조절한다.
6. minmax() 함수 사용
.grid-container {
display: grid;
grid-template-rows: minmax(100px, auto); /* 최소 100px, 최대 내용에 따라 자동 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 최소 200px, 최대 1fr */
}minmax() 함수는 행 또는 열의 최소 및 최대 크기를 정의한다.
auto-fit은 그리드 컨테이너의 크기에 맞게 자동으로 열의 개수를 조절해 준다.
minmax()는 크기의 최소치를 정하는 것이다. 어떤 상황에서도 그정도 크기를 가지도록 만드는 것이다. 때문에 브라우저의 크기에 따라 크기가 늘어날 수는 있어도 줄어들지는 않는다.
auto-fit은 minmax 200px에 따라서 표현되는 열의 수를 조정해준다. 때문에 브라우저의 크기가 충분하다면 1줄에 모든 열을 표현할 것이다.
문제점1 : 브라우저의 크기가 작을 경우
반대로 브라우저의 크기가 부족하다면 아래와 같은 상황이 발생한다.
이것은 브라우저 크기가 줄어들 때마다 변화하는 레이아웃의 모양이다.
우선 행이 2줄이 되자 행의 최소 크기인 100px가 유지되지 않는다.
이유는 2가지라고 할 수 있다.
1. 명시적 행과 암시적 행의 문제
우선 grid-template-rows: minmax(100px, auto); 는 별도로 행의 수를 정의하지 않았기 때문에 명시적으로 만들어지는 행은 1행(1줄)뿐이다.
명시적이라는 것은 코드 상에서 정의가 되었다는 의미이다.
역으로 코드 상에 따로 정의가 되지 않았다면 암시적 행으로 취급하게 된다.
즉 브라우저 크기에 따라서 행이 2줄이 되었을 경우 2행 부분은 암시적 행이다.(코드에 정의가 되지 않은 행)
하지만 암시적 행은 grid-auto-rows 속성이 정의되어 있지 않기 때문에 콘텐츠의 높이에 따라 자동으로 높이가 결정된 것이다. 때문에 3행일 경우도 2행과 동일한 높이를 가지게 되었다.
2. auto fit의 문제
반면 grid-template-columns은 auto-fit과 minmax(200px, 1fr) 속성을 따른다.
열의 너비(가로 길이)가 최소 200px이고 최대 1fr(fraction, 분수)의 크기를 가진다.
auto-fit 속성에 따라 열들은 너비가 충부할 때는 서로 1fr만큼의 비율을 나눠가지면서 배치되지만 그렇지 않을 경우 최소 200px의 공간은 차지한다. 공간이 부족할 경우 다음 행에서 표현된다.
결과적으로 브라우저의 크기가 작아지면서 2열로 줄어들었지만 auto-fit 속성과 최소 크기 속성은 유지되기 때문에 너비는 200px을 유지하고 있는 것을 볼 수 있다.
'프로그래밍 > css 심화' 카테고리의 다른 글
| CSS 심화 공부(15) - position (0) | 2025.03.14 |
|---|---|
| CSS 심화 공부(14) - grid(3) : row-start, end / column-start, end (0) | 2025.03.14 |
| CSS 심화 공부(12) - grid(1) (0) | 2025.03.13 |
| CSS 심화 공부(11) - flex item 속성(5) : flex (0) | 2025.03.13 |
| CSS 심화 공부(10) - flex item 속성(4) : flex basis (0) | 2025.03.13 |