Grid 사용방식을 부모(컨테이너) 관점, 자식(셀) 관점 속성, Area 활용 방법으로 나누어 정리하였다.
html
<body>
<div class="container">
<div class="item color1">Item1</div>
<div class="item color2">Item2</div>
<div class="item color3">Item3</div>
<div class="item color4">Item4</div>
<div class="item color5">Item5</div>
<div class="item color6">Item6</div>
<div class="item color7">Item7</div>
<div class="item color8">Item8</div>
<div class="item color9">Item9</div>
<div class="item color10">Item10</div>
</div>
</body>📌 부모(컨테이너) 관점
✅ 방법 1
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 200px 100px;
}
✅ 방법 2) repeat 활용
.container {
display: grid;
grid-template-columns: repeat(5, 100px);
grid-template-rows: 100px 200px ;
}
✅ 방법 3) % 활용
반응형으로 만들 경우 다음과 같이 % 나 fr 을 사용한다.
.container {
display: grid;
grid-template-columns: repeat(5, 10%);
grid-template-rows: 100px 200px;
}현재 .container의 크기는 뷰포트 전체 크기와 같다. 이 너비의 10%라는 의미이다.
✅ 방법 4) fr 활용
fr을 사용하면 전체 너비/높이에 대한 비율로 요소의 크기를 결정할 수 있다. 여기서 열의 너비는 각각 전체 너비의 1/4, 2/4, 1/4가 된다.
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
}
다음과 같이 repeat과 fr을 혼합하여 구성할 수도 있다.
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 100px 200px;
}
✅ 방법 5) grid-auto-rows 활용
몇 줄이 생기든 간에 높이를 모두 150px로 똑같이 만들 수 있다.
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 150px;
}
하지만 이렇게 해당 cell의 크기를 넘어가는 텍스트가 채워지는 경우, 내용이 잘리게 된다.
따라서 이런 경우에는 minmax() 를 활용하면, 다음과 같이 기본적인 cell의 높이는 150px로 하되, 내용이 셀의 크기를 넘어서는 경우 자동으로 해당 행의 높이가 늘어나는 것을 볼 수 있다.
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: minmax(150px, auto);
}
✅ 방법 6) grid-gap 활용
grid-gap을 활용하면 셀 사이에 간격을 줄 수 있다. grid-row-gap, grid-column-gap을 활용하여 행 사이, 열 사이에 간격을 줄 수도 있다.
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: minmax(150px, auto);
grid-gap: 10px; /* grid-row-gap: 행 사이의 간격, grid-column-gap: 열 사이의 간격*/
}
✅ justify-content
display: flex에서 justify-content를 적용했을 때와 동일한 효과를 가진다.
당연하지만 그리드 영역의 너비가 전체 영역보다 작을 때만 효과를 가진다. fr를 사용하는 등 그리드 영역이 전체 너비를 차지하게 되는 경우에는 효과가 없다.
✅ justify-items
grid에만 있는 속성으로서, 그리드 셀 안에서의 요소의 레이아웃을 결정한다.
📌 자식(셀) 관점
grid line 은 다음과 같이 숫자로 이루어진다.
html
두 번째 셀에 item2라는 클래스를 추가하였다.
<div class="container">
<div class="item color1">Item1</div>
<div class="item item2 color2">Item2</div>
<div class="item color3">Item3</div>
<div class="item color4">Item4</div>
<div class="item color5">Item5</div>
<div class="item color6">Item6</div>
<div class="item color7">Item7</div>
<div class="item color8">Item8</div>
<div class="item color9">Item9</div>
<div class="item color10">Item10</div>
</div>✅ 방법 1) grid-row-start/end, grid-column-start/end 활용
grid line 번호를 활용해서 특정 셀이 그리드 레이아웃의 얼만큼을 차지할 지 지정할 수 있다.
.container {
display: grid;
padding: 10px;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: minmax(150px, auto);
grid-gap: 10px;
}
.item2 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}다음과 같이 축약형으로 작성할 수도 있다. 만약 grid-column: 2 / -1 이라고 작성한다면 grid column line 2 부터 끝까지 차지한다는 의미이다.
/* 축약형 */
.item2 {
grid-column: 2 / 4; /* 2 / -1 을 한다면 2부터 끝까지 차지 */
grid-row: 1 / 3;
}
span을 활용하여 특정 grid line 으로부터 얼만큼 차지하게 할 지 지정할 수도 있다.
.container {
display: grid;
padding: 10px;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: minmax(150px, auto);
grid-gap: 10px;
}
.item2 {
grid-column: 2 / span 3;
grid-row: 1 / 3;
}
📌 Areas
알아두면 유용한 Areas 사용 방법에 대해 정리하였다.
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="basic-style.css" />
<link rel="stylesheet" href="image.css" />
<title>Document</title>
</head>
<body>
<section class="container">
<img
src="https://images.unsplash.com/photo-1661933021480-75b708d5648f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
alt="img"
class="image image1"
/>
<img
src="https://images.unsplash.com/photo-1661912267451-712c028d74a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
alt="img"
class="image image2"
/>
<img
src="https://images.unsplash.com/photo-1661895581832-51c8e3538b4d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80"
alt="img"
class="image image3"
/>
<img
src="https://images.unsplash.com/photo-1661836890977-1cc392056094?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxN3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60"
alt="img"
class="image image4"
/>
<img
src="https://images.unsplash.com/photo-1661900980235-db5affe17d8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1567&q=80"
alt="img"
class="image image5"
/>
<img
src="https://images.unsplash.com/photo-1661901060088-32dbfeb040df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80"
alt="img"
class="image image6"
/>
<img
src="https://images.unsplash.com/photo-1661890090656-6bf16bbdee4c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=874&q=80"
alt="img"
class="image image7"
/>
</section>
</body>
</html>css
body {
padding: 1rem;
background-color: black;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
grid-gap: 1rem;
grid-template-areas:
'a a a'
'b c c'
'b d g'
'e f g';
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
}
.image1 {
grid-area: a;
}
.image2 {
grid-area: b;
}
.image3 {
grid-area: c;
}
.image4 {
grid-area: d;
}
.image5 {
grid-area: e;
}
.image6 {
grid-area: f;
}
.image7 {
grid-area: g;
}위와 같이 .container에 알파벳으로 영역의 이름을 지정하고 특정 요소에 grid-area를 영역 이름으로 지정하면, 그 요소는 해당 영역만큼의 넓이를 차지한다.
출처
넓이보다 깊이있게