목차
grid-row-end 예제 - 아이템 행 끝 위치 지정 grid-row-end 정의 grid-row-end 구문 grid-row-end 예제 - 아이템 행 확장 grid-row-end 예제 - 속성값이 음수인 경우
grid-row-end 예제 - 아이템 행 끝 위치 지정
<style>
.grid-box {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: pink;
padding: 10px;
}
.grid-box > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 10px 0;
font-size: 30px;
}
.a {
grid-row-end: 3;
}
</style>
<div class="grid-box">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
<div class="e">e</div>
<div class="f">f</div>
<div class="g">g</div>
</div>
결과보기
grid-row-end 정의
아이템의 로우(=행) 끝 위치나 확장할 행 개수 지정.
1. cf.
2.
기본값: auto
상속여부: X
애니가능: O
CSS버전: CSS Grid Layout Module Level 1
JS구문: object .style.gridRowEnd="4";
3.
IE 제외한 주요 최신브라우저 모두 지원 .
4. MDN grid-row-end 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end
grid-row-end 구문
selector {grid-row-end: auto|span n |row-line |initial|inherit;}
[속성값]
auto
1개 행만 기본 사용. (기본값)
span n
아이템 확장할 행 개수(n 개) 지정.
row-line
아이템 끝행 위치를 숫자로 지정. (포함 X)
음수값 가능. 이 경우 끝행부터 세며 포함 O . (예) -1 경우, 맨 뒤 끝까지 차지.
initial
이 속성의 기본값 사용.
inherit
부모요소의 속성값 상속.
grid-row-end 예제 - 아이템 행 확장
<style>
.grid-box {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: pink;
padding: 10px;
}
.grid-box > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 10px 0;
font-size: 30px;
}
.a {
grid-row-end: span 3;
}
</style>
<div class="grid-box">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
<div class="e">e</div>
<div class="f">f</div>
<div class="g">g</div>
</div>
결과보기
grid-row-end 예제 - 속성값이 음수인 경우
<style>
.grid-box {
display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
background-color: pink;
padding: 10px;
}
.grid-box > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 10px 0;
font-size: 30px;
}
.a { grid-row-end: -1; } /* 맨 끝행부터 1번째 행 앞까지 위치. */
.b { grid-row-end: -2; } /* 맨 끝행부터 2번째 행 앞까지 위치. */
.c { grid-row-end: -3; } /* 맨 끝행부터 3번째 행 앞까지 위치. */
.d { grid-row-end: -4; } /* 맨 끝행부터 4번째 행 앞까지 위치. */
</style>
<div class="grid-box">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
</div>
결과보기
PS. 특정 요소만 grid-row-end 적용 시 적용 안 될 수 있으니 주의.
<style>
.grid-box {
display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
background-color: pink;
padding: 10px;
}
.grid-box > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 10px 0;
font-size: 30px;
}
.a { grid-row-end: -1; } /* 맨 끝행부터 1번째 행 앞까지 위치. */
</style>
<div class="grid-box">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
<div class="e">e</div>
<div class="f">f</div>
</div>
결과보기
