부트스트랩, 피그마 등에서 불리우는 그리드 시스템과는 조금 다른 얘기이다.
그리드 시스템에 대한 포스팅은 추후 할 예정이며, 우선적으로는 관련한 깃헙 레포를 첨부한다.
Sass + 그리드 시스템 활용
기본 구조 만들기
다음과 같이 그리드의 기본 구조를 만들어보자.
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Grid</title>
</head>
<body>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>// styles.css
* {
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 200px 100px auto;
grid-gap: 10px;
}
.grid > div {
border: 1px solid rgb(0, 95, 107);
border-radius: 5px;
}Responsive Grid with fr
다만 현재의 상태에서는 그리드 박스가 늘어나거나 줄어들지 않고 고정된 폭을 가진다.
이를 유연한 폭을 가지도록 하게끔 바꿔주는 방법은 굉장히 간단하다.
grid-template-columns: 100px 100px 100px;위 부분을 다음처럼 바꿔주자.
grid-template-columns: 1fr 1fr 1fr;width가 유연하게 늘어나고 줄어드는 것이 확인되는가?
그리고 또한 비율을 각각 다르게도 설정이 가능하다.
grid-template-columns: 2fr 3fr 1fr;위와 같은 형태는 웹 사이트에서 많이 쓰이는 레이아웃이다.
왼쪽에 사이드바를 두고 가운데에 메인의 영역을 두고 오른쪽에 서브 사이드바를 두는 형태이다.
하나는 고정값을 가지고, 두개는 유연하게도 할 수 있다.
grid-template-columns: 2fr 3fr 100px;이러면 3번은 항상 100px로 고정된다.
repeat
grid-template-columns: 1fr 1fr 1fr;위 내용은 repeat를 써서 다음과 같이 쓸 수 있다.
grid-template-columns: repeat(3, 1fr);column이 3개가 동일한 width로 만들어진다.
grid-template-columns: repeat(2, 1fr 2fr);위와 같은 경우로도 구성할 수 있다.
grid-template-columns: 50px repeat(2, 1fr 2fr);맨 좌측의 column은 50px로 고정되고 나머지는 repeat를 따른다.
minmax
grid-template-columns: minmax(50px, 150px) 1fr 2fr;
위와 같이 minmax를 사용하면 박스의 최소길이와 최대길이를 지정할 수 있다.
아무리 내용의 양이 적더라도 최소한 width 50px은 확보하고, 내용이 많아 50px이 넘어가면 알아서 늘어어나다가 150px까지만 늘어나도록 처리해 준 예시이다.
다른 예로 minmax(50px, auto)의 의미는 최소한 50px, 최대는 자동으로(auto) 늘어나게이다.
grid-template-columns: minmax(50px, 150px) 1fr 2fr;
grid-auto-rows: minmax(100px, auto);row에도 똑같이 minmax를 사용하여 높이가 최소 100px을 차지하게, 내용의 양이 많다면 알아서 늘어나게 해줄 수 있다.
