Bento Grid Layout - css로 벤토 그리드를 만들어보자

Benth Grid Layout(벤토 그리드)

Bento는 일본어로 弁当(べんとう, 도시락)를 이야기합니다. 마치 구획이 나뉘어진 듯한 모습에서 그런식의 이름이 붙은 것 같습니다.

우리가 만들어볼 레이아웃은 아래와 같습니다.

breakpoint를 이용해서 화면이 변화하도록 만들어 보는 예제는 아래와 같습니다.

HTML

기본적으로 HTML은 아주 단순합니다. main태그 안에 article 태그만 넣어두었습니다. 스타일에서 하는 일이 많습니다.

<main>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
  <article></article> 
</main>

SCSS

display : grid 를 이용해서 전체적인 레이아웃을 잡고, grid-row 와 grid-column 을 이용해서 경계를 넘나드는 배치로 구성했습니다.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
main {
  display: grid;
  width: 100%;
  max-width: 1000px;
  height: 100%;
  max-height: 600px;
  gap: 0.5rem;
  grid-template-columns: repeat(2, 1fr);
  padding: 0.5rem;
}
article {
  background-color: hsl(210, 50%, 90%);
  border-radius: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(1,0,0,1);
  transform: scale(0.5);
  &.reveal {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
  }
}
@media screen and (min-width: 640px) {
  main {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1024px) {  
  main {
    grid-template-rows: 4fr 3fr 3fr;
  }
  /* 가장 핵심이 되는 레이아웃 구성 부분 */
  article {
    &:nth-of-type(1) {
      grid-row: 1/3;
    }
    &:nth-of-type(2) {
      grid-row: 3/4;
    }
    &:nth-of-type(5) {
      grid-column: 2/4;
      grid-row: 2/4;
    }
  }
}

결과보기

화면이 구현된 결과는 아래 codepen 화면으로 확인해볼 수 있습니다. 순차적으로 나타나는 애니메이션은 javascript 로 구현하였습니다.