12-1 CSS 그리드 레이아웃 사용하기
CSS 그리드 레이아웃에서 사용하는 용어
CSS 그리드 레이아웃에서 항목을 배치하는 속성
#그리드 컨테이너를 지정하는 display속성
- grid: 블록 레벨의 그리드 컨테이너를 만든다
- inline-grid: 인라인 레벨의 그리드 컨테이너를 만든다
#열과 행을 지정하는 grid-template-columns, grid-template-rows 속성
/* Do it! 그리드 컨테이너에서 열과 행 지정하기 */
.container {
display: grid;
grid-template-columns: 100px 200px 300px;
grid-template-rows: 50px 100px;
}
#동적으로 만들어진 행의 높이를 지정하는 grid-auto-rows 속성
/* Do it! grid-auto-rows 속성 지정하기 */
.container {
display:grid;
grid-template-columns: 100px 200px 300px;
grid-auto-rows: 100px;
}
#상대적인 크기를 지정하는 fr단위
예) 열 너비를 2:1:2 비율로 배치하고 싶다면 다음과 같이 지정한다:
grid-template-columns: 2fr 1fr 2fr;#값이 반복될 때 줄여서 표현할 수 있는 repeat()함수
grid-template-columns: repeat(3, 1fr); /* grid-template-columns: 1fr 1fr 1fr; */#최솟값과 최댓값을 지정하는 minmax()함수
grid-template-rows: minmax(100px,auto);#빈공간응 자동으로 채우는 auto-fit과 auto-fill 속성
/* Do it! auto-fit과 auto-fill을 사용해 배치하기 */
.container-1 {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.container-2 {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
#gap속성
gap: 20px 30px; /* 행 간격 20px, 열 간격 30px */12-2 그리드 라인과 템플릿 영역으로 배치하기
그리드 라인을 사용해 배치하기
그리드 라인에서 항목을 배치할 때 사용하는 속성:
- grid-column-start: 열의 시작할 세로선 번호를 지정한다.
- grid-column-end: 열의 끝날 세로선 번호를 지정한다.
- grid-column: 열의 시작과 끝 번호를 한 줄에 같이 지정한다.
- grid-row-start: 행의 시작할 세로선 번호를 지정한다.
- grid-row-end: 행의 끝날 세로선 번호를 지정한다.
- grid-row: 행의 시작과 끝 번호를 한 줄에 같이 지정한다.
/* Do it! 그리드 라인을 사용해 배치하기 */
.box1 {
background-color:#3689ff;
grid-column: 1 / -1;
grid-row-start: 1;
}
.box2 {
background-color:#00cf12;
grid-column-start: 1;
grid-row: 2 / -1;
}
.box3 {
background-color:#ff9019;
grid-column: 2 / -1;
grid-row-start: 2;
}
.box4 {
background-color:#ffd000;
grid-column-start: 2;
grid-row-start: 3;
}
.box5 {
background-color:#ff3f3f;
grid-column: 3 / -1;
grid-row: 3 / -1;
}
템플릿 영역을 사용해 배치하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Grid Layout</title>
<style>
.gallery{
width:700px;
margin: 20px auto;
display: grid;
gap: 5px;
grid-template-areas:
"photo1 photo1 photo2"
"photo1 photo1 photo3"
"photo4 photo5 photo6";
}
.gallery img{
width:100%;
height:100%;
border-radius: 10px;
object-fit:cover;
}
.photo1 {grid-area: photo1;}
.photo2 {grid-area: photo2;}
.photo3 {grid-area: photo3;}
.photo4 {grid-area: photo4;}
.photo5 {grid-area: photo5;}
.photo6 {grid-area: photo6;}
</style>
</head>
<body>
<div class="gallery">
<img class="photo1" src="images/photo-1.jpg" alt="따뜻한 차가 있는 겨울 풍경">
<img class="photo2" src="images/photo-2.jpg" alt="남극 펭귄">
<img class="photo3" src="images/photo-3.jpg" alt="눈이 가득 쌓인 시골 풍경">
<img class="photo4" src="images/photo-4.jpg" alt="오로라가 보이는 밤 풍경">
<img class="photo5" src="images/photo-5.jpg" alt="눈 쌓인 배경">
<img class="photo6" src="images/photo-6.jpg" alt="나뭇가지에 앉아있는 빨간 새">
</div>
</body>
</html>