티스토리 뷰
목차
웹 디자인을 하다 보면 요소들을 깔끔하게 정리하는 게 얼마나 중요한지 알게 됩니다. 사진 갤러리, 상품 리스트, 혹은 블로그 게시글 모음 등등. 이렇게 다양한 콘텐츠를 효율적으로 배치하는 일은 생각보다 어려울 수 있습니다.
하지만 걱정 마세요! Grid Layout이라는 강력한 도구가 그 문제를 한 방에 해결해 줄 것입니다.
오늘은 이 Grid Layout에 대해 이야기해 보겠습니다!
★ Grid Layout이란?
Grid Layout, 줄여서 그냥 '그리드'라고 부르는 이 기술은 웹 페이지의 레이아웃을 만들 때 정말로 유용한 도구입니다. 그리드는 2차원 레이아웃 시스템으로, 요소들을 가로와 세로 두 축에서 자유롭게 배치할 수 있습니다. 앞서 다른 포스팅에서 알아보았던 Flexbox도 레이아웃을 정리하는 데에 도움을 주지만, Flexbox가 주로 한 줄씩 배치하는 데 강점을 가진 반면, 그리드는 가로와 세로 모두를 다룰 수 있어 복잡한 레이아웃을 훨씬 쉽게 만들 수 있습니다.
쉽게 말해, 그리드는 요소들을 바둑판 위에 올려놓고 각 칸에 딱 맞게 배치하는 것과 같습니다. 이렇게 요소들을 정리하다 보면, 자연스럽게 웹 페이지의 구조가 깔끔해지고, 어떤 화면 크기에서든 일관된 디자인을 유지할 수 있게 됩니다.
★ 그리드의 기본 개념
그리드를 시작하려면 먼저 두 가지를 알아야 합니다.
grid container와 grid item입니다. grid container는 그리드 레이아웃이 적용되는 부모 요소를 의미하고, 그 안에 있는 자식 요소들이 바로 grid item입니다. 그리드를 사용하려면 부모 요소에 display: grid;를 설정하기만 하면 됩니다. 그러면 자식 요소들이 그리드의 규칙에 따라 배치되기 시작합니다.
예를 들어, 다음과 같은 HTML 코드가 있다고 해보겠습니다.
<div class="grid-container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
<div class="item4">Item 4</div>
</div>
→ 이 HTML 코드를 보면 grid-container이라는 클래스를 가진 <div> 태그 안에 item 클래스를 가진 <div> 태그들이 있습니다.
이제 CSS에서 grid-container에 그리드 레이아웃을 적용해봅시다!
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
gap: 10px;
}
→ 이 CSS 코드에서 grid-template-columns: 1fr 1fr;는 두 개의 동일한 너비를 가진 열을 생성하는 것을 의미합니다. 1fr은 "1 fraction"의 줄임말로, 전체 가용 공간을 동일한 비율로 나누는 것을 의미합니다. 그리고 gap: 10px;은 그리드 아이템들 사이에 10px의 간격을 설정하는 것입니다. 이렇게 설정하면 각 아이템이 두 줄로 정렬되며, 사이사이에 간격이 생깁니다. 간단하지만 효과적입니다.
★ 그리드의 주요 속성들
그리드를 제대로 활용하려면 몇 가지 중요한 속성들을 이해해야 합니다. 이 속성들은 그리드를 더욱 강력하게 만들어 주는 도구들입니다.
1) grid-template-columns와 grid-template-rows
그리드 레이아웃의 열과 행을 정의합니다. 각 열과 행의 크기를 픽셀, 퍼센트, fr 단위 등으로 지정할 수 있습니다.이 코드는 첫 번째 열의 너비를 100px로, 두 번째 열은 남은 공간의 1/3, 세 번째 열은 2/3을 차지하도록 설정합니다. 그리고 행의 높이는 첫 번째는 콘텐츠에 맞춰 자동으로 조정되고, 두 번째는 고정 300px이 됩니다.
2) grid-area
그리드 아이템이 그리드 안에서 차지할 위치를 설정합니다. grid-column과 grid-row 속성을 조합해 사용할 수도 있고, 이름을 지정해 그리드 내에서 특정 영역을 차지하도록 할 수도 있습니다.이 코드는 item1이 첫 번째 행의 첫 번째 열에서 시작해, 두 번째 열까지 걸쳐 배치되도록 합니다. grid-area: 1 / 1 / 2 / 3;은 각각 grid-row-start, grid-column-start, grid-row-end, grid-column-end를 의미합니다.
3) grid-template-areas
그리드 레이아웃을 이름으로 정의할 수 있습니다. 이 기능은 특히 복잡한 레이아웃을 단순하게 관리하는 데 유용합니다.그리고 각 그리드 아이템에 이름을 할당합니다:이 설정을 통해, header는 두 열에 걸쳐 상단에 위치하고, sidebar와 content는 각각 좌측과 우측에, footer는 하단에 걸쳐 있는 그리드 레이아웃이 만들어집니다.
4) auto-fit과 auto-fill
반복되는 그리드 아이템들을 다룰 때 매우 유용합니다. repeat() 함수와 함께 사용해 유동적인 그리드 레이아웃을 만들 수 있습니다.이 코드는 화면 크기에 맞춰 열의 수를 자동으로 조정하며, 각 열의 최소 너비는 100px, 최대 너비는 가능한 만큼 차지하도록 설정합니다.
★ 간단한 포토 갤러리 만들어보기!
이제 실제로 그리드를 활용해 간단한 포토 갤러리를 만들어 볼까요? 이 갤러리에서는 다양한 크기의 이미지를 그리드로 배치해, 어떤 화면 크기에서도 아름답게 보이도록 할 것입니다.
<div class="photo-gallery">
<img src="photo1.jpg" alt="Photo 1">
<img src="photo2.jpg" alt="Photo 2">
<img src="photo3.jpg" alt="Photo 3">
<img src="photo4.jpg" alt="Photo 4">
</div>
.photo-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
.photo-gallery img {
width: 100%;
height: auto;
object-fit: cover;
}
→ 이 코드를 적용하면, 각 사진은 최소 150px 너비를 가지며, 남은 공간을 균등하게 채우도록 그리드에 배치됩니다. 화면 크기에 따라 열의 수가 자동으로 조정되어, 갤러리가 항상 최적화된 레이아웃을 유지하게 됩니다.
★ 그리드의 장점들
CSS Grid Layout은 복잡한 웹 레이아웃을 단순하게 만들 수 있는 강력한 도구입니다.
1) 그리드는 특히 여러 열과 행을 사용해 복잡한 레이아웃을 구성할 때 매우 유용하며, 레이아웃의 유연성과 가독성을 높여줍니다.
2) 그리드를 사용하면 유지보수도 더 쉬워집니다. 코드를 명확하고 논리적으로 작성할 수 있어, 나중에 레이아웃을 수정하거나 확장할 때 더 편리합니다.
이러한 장점들 때문에 그리드는 현대 웹 디자인에서 널리 사용되고 있으며, 배우는 것도 어렵지 않습니다.
CSS Grid Layout은 웹 페이지의 레이아웃을 설계할 때 꼭 알아야 할 도구입니다. 그리드를 활용하면 복잡한 레이아웃도 깔끔하고 쉽게 만들 수 있으며, 다양한 화면 크기에서 일관된 디자인을 유지할 수 있습니다.
이제 여러분도 그리드를 사용해 더욱 멋진 웹 페이지를 만들어 보세요.
웹 디자인이 훨씬 더 재미있어질 것입니다!