Grid 아이템 속성
grid-row: grid-row 속성은 CSS 그리드 레이아웃(Grid Layout)에서 그리드 아이템(Grid Item)의 행 위치를 지정하는 속성
=> grid-row: grid-row-start / grid-row-end;
=> grid-row-start: item이 배치될 시작 행 번호
=> grid-row-end: item이 배치될 끝 행 번호
=> .item {
grid-row-start: 1;
grid-row-end: 3;
}
=> .item {
grid-row: 1 / 3;
}
grid-column:grid-column 속성은 CSS 그리드 레이아웃(Grid Layout)에서 그리드 항목이 차지하는 열(column)의 범위를 지정
=> grid-column: grid-column-start / grid-column-end;
=> grid-column-start: item이 배치될 시작 열 번호
=> grid-column-end: item이 배치될 끝 열 번호
=> .item {
grid-column-start: 1;
grid-column-end: 3;
}
=> .item {
grid-column: 1 / 3;
}
grid-area: grid-row, grid-column 및 grid-template-areas를 한 번에 지정하는 단축 속성
=> grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
=> grid-template-areas 속성이 참조할 영역 이름을 설정할 수 있다.
=> 영역 이름을 설정하면 grid-row와 grid-column은 무시된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>grid 아이템 속성</title>
<style type="text/css">
.container1 {
width: 600px;
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 1fr);
border: 4px solid dodgerblue;
display: grid;
}
.container1 .item1 {
border: 4px solid tomato;
}
.container1 .item1:nth-child(1) {
/*
grid-row-start: 1;
grid-row-end: 3;
*/
grid-row: 1 / 3;
/*
grid-column-start: 1;
grid-column-end: 3;
*/
grid-column: 1 / 3;
}
.container1 .item1:nth-child(2) {
grid-row: 1 / 3;
grid-column: 3 / 4;
}
.container1 .item1:nth-child(4) {
grid-row: 4 / 5;
grid-column: 2 / 4;
}
.container2 {
width: 600px;
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 1fr);
border: 4px solid dodgerblue;
display: grid;
}
.container2 .item2 {
border: 4px solid yellowgreen;
}
.container2 .item2:nth-child(1) {
grid-row: -3 / -5;
grid-column: -2 / -4;
}
.container2 .item2:nth-child(2) {
/* grid-row-end나 grid-column-end에 span이 나오면 grid-row-start나 grid-column-start부터 뒤로 늘인다. */
grid-row-start: 1;
grid-row-end: span 2;
grid-column-start: 3;
grid-column-end: span 1;
}
.container2 .item2:nth-child(4) {
/* grid-row-start나 grid-column-start에 span이 나오면 grid-row-end나 grid-column-end부터 앞으로 늘인다. */
grid-row-start: span 1;
grid-row-end: 5;
grid-column-start: span 2;
grid-column-end: 4;
}
.container3 {
width: 600px;
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 1fr);
border: 4px solid dodgerblue;
display: grid;
}
.container3 .item3 {
border: 4px solid hotpink;
}
.container3 .item3:nth-child(1) {
grid-area: 1 / 1 / 3 / 3;
}
.container3 .item3:nth-child(2) {
grid-area: 1 / 3 / 3 / 4;
}
.container3 .item3:nth-child(4) {
grid-area: 4 / 2 / 5 / 4;
}
</style>
</head>
<body>
<div class="container1">
<div class="item1">1</div>
<div class="item1">2</div>
<div class="item1">3</div>
<div class="item1">4</div>
<div class="item1">5</div>
</div><br/>
<div class="container2">
<div class="item2">1</div>
<div class="item2">2</div>
<div class="item2">3</div>
<div class="item2">4</div>
<div class="item2">5</div>
</div><br/>
<div class="container3">
<div class="item3">1</div>
<div class="item3">2</div>
<div class="item3">3</div>
<div class="item3">4</div>
<div class="item3">5</div>
</div><br/>
</body>
</html>
repeat: repeat() 함수는 행, 열의 크기 정의를 반복한다.
=> 반복하는 횟수와 행, 열의 크기를 인수로 사용한다.
=> grid-template-rows와 grid-template-columns에서 사용한다.
minmax: minmax() 함수는 행, 열의 최소, 최대 크기를 지정한다.
=> 첫 번째 인수는 최소값이고, 두 번째 인수는 최대값이 들어간다.
=> grid-template-rows, grid-template-columns, grid-auto-rows, grid-auto-columns
=> 일반 요소에 min-width와 max-width 속성을 지정하는 것과 유사한 기능이 실행된다.
fit-content: fit-content() 함수는 행, 열의 크기를 grid item이 포함하는 내용의 크기에 맞춘다.
=> 내용이 표시될 최대 크기는 함수의 인수로 지정한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>grid 아이템 함수</title>
<style type="text/css">
.container1 {
width: 900px;
height: 200px;
border: 2px solid red;
display: grid;
/* grid-template-rows: 1fr; */
/* grid-template-columns: 100px 100px 100px 100px 100px 100px; */
/* grid-template-columns: repeat(6, 100px); */
/* grid-template-rows: [row-start] 200px [row-end row-start] 200px [row-end]; */
/* grid-template-rows: repeat(2, [row-start] 200px [row-end]); */
/* grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr; */
grid-template-columns: repeat(6, 1fr 2fr);
}
.container1 .item1 {
border: 2px solid blue;
display: flex;
justify-content: center;
align-items: center;
}
.container2 {
width: 600px;
height: 200px;
border: 2px solid red;
display: grid;
/* 컨테이너 너비가 작아져도 열을 각각 최소 100px 200px의 너비를 유지한다. */
/* 컨테이너의 너비가 커져서 각 열이 표시될 너비가 충분히 나오면 1 : 1 비율을 유지한다. */
grid-template-columns: minmax(100px, 1fr) minmax(200px, 1fr);
}
.container2 .item2 {
border: 2px solid blue;
display: flex;
justify-content: center;
align-items: center;
}
.container3 {
border: 2px solid red;
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: repeat(2, fit-content(400px));
}
.container3 .item3 {
border: 2px solid blue;
}
</style>
</head>
<body>
<div class="container1">
<div class="item1">1</div>
<div class="item1">2</div>
<div class="item1">3</div>
<div class="item1">4</div>
<div class="item1">5</div>
<div class="item1">6</div>
<div class="item1">7</div>
<div class="item1">8</div>
<div class="item1">9</div>
</div><br/>
<div class="container2">
<div class="item2">1</div>
<div class="item2">2</div>
<div class="item2">3</div>
<div class="item2">4</div>
</div><br/>
<div class="container3">
<div class="item3">Hello Hello World</div>
<div class="item3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="item3">3</div>
<div class="item3">4</div>
</div><br/>
</body>
</html>
