부트스트랩, 피그마 등에서 불리우는 그리드 시스템과는 조금 다른 얘기이다.
그리드 시스템에 대한 포스팅은 추후 할 예정이며, 우선적으로는 관련한 깃헙 레포를 첨부한다.
Sass + 그리드 시스템 활용
위 이미지를 보면 header, menu, main, right menu, footer 등으로 레이아웃은 구성된다.
이런 것들을 이제 예전보다 더욱 간결하게 그리고 더욱 풍부하게 그리드로 구현할 수 있다.
grid
Example
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
<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>
그리드는 컨테이너와 아이템으로 나뉜다. 이 둘은 꼭 필요하며 컨테이너 안에 아이템이 들어가 있어야 한다.
위의 이미지를 보듯 반응형으로 동작하도록 되어 있다. 1부터 9까지의 박스들이 나와있는데 이 박스들을 우리는 그리드라고 얘기한다. 좀 더 자세히 얘기하자면 사실은 박스들 사이의 선들이 그리드를 구성한다고 할 수 있다.
그리드 컨테이너와 그리드 아이템을 구성하기 위해서는 다음과 같은 코드면 충분하다.
display: grid;아주 짧은 한 문장이지만, 기능은 아주 막강하다.
inline-grid
display: inline-grid;inline-grid를 사용하게되면 위와는 다르게 반응형으로 그리드 박스가 커지거나 작아지는 것이 아니라 고정된 박스 크기를 가진다. 즉 사이즈가 변하지 않는다.
grid-gap
1. grid-column-gap
grid-column-gap: 50px;column에 공간을 넣어준다. 즉 그리드 블록들의 column 사이에 gap을 의미한다.
2. grid-row-gap
grid-row-gap: 50px;row에 공간을 넣어준다. 즉 그리드 블록들의 row 사이에 gap을 의미한다.
2. grid-gap
grid-gap: 50px 100px;위와 같이 column-gap과 row-gap을 동시에 줄 수 있다. column-gap은 50px이며 row-gap은 100px인 코드이다.
grid lines
그리드의 재밌는 점이 나오기 시작한다.
위의 라인들이 보이는가? 각각의 column과 row에 라인 1~4가 존재한다. 여기서 만약에 첫번째 블록을 다음과 같이 원하는 라인을 명시함으로써 다음과 같이 합칠 수 있다.
.item1 {
grid-column-start: 1; // 여기의 1은 라인 넘버이다.
grid-column-end: 3;
}
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
재밌고 막강하지 않은가? 우리가 웹 페이지를 구성할 때 그리드를 활용하면 레이아웃을 아주 빠르고 쉽게 만들어 나갈 수 있을 것이다.
여기까지 와서 맨 위의 웹 페이지 기본적인 골격에 대한 이미지를 다시 한번 봐보자.
header는 라인 넘버를 어디서부터 어디까지 가지고 있는지 이제 조금씩 보일 것이다.
menu는 어떠한가? right menu는 또 어떠한가?
여기까지가 그리드에 대한 기본적인 개념 소개이다.
주인장은 시리즈물로 계속해서 그리드에 대해서 더욱 자세히 알아보려고 한다.
