css-19: fr , grid-template
grid-template
fr-fraction(부분)
- fraction은 grid에서 사용 가능한 공간을 뜻한다.
- grid container의 너비가 500px이면, 500px안에서 fraction이 설정됨
- 반응형으로 만들 수있음
- fr값 비율로 공간을 나눈다.
<body class="grid">
<div class="header"></div>
<div class="content"></div>
<div class="nav"></div>
<div class="footer"></div>
</body>
.grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
}
.header {
background-color: #2ecc71;
}
.content {
background-color: #3498db;
}
.nav {
background-color: #8e44ad;
}
.footer {
background-color: #f39c12;
}
width를 제한하면
.grid {
display: grid;
gap: 10px;
width: 500px;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
}
fr 비율로 정하기(반응형으로 만들 수 있음)
.grid {
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr 4fr 1fr;
grid-template-rows: repeat(4, 100px);
}
rows 설정
-
container에 height를 설정해줘야함
-
항상 block은 width와 height 주어져 있지 않은 경우에는
width는 가능한 한 최댓값, height은 0이다.
→ fr을 rows에도 쓰려면 grid container에 height만 써도 동작하지만,
width만 쓰면 동작하지 않는 이유가 이것이다.
.grid {
display: grid;
gap: 10px;
height: 50vh;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
}
- 높이를 50vh로 해줬고, 1fr이니 화면의 반의 1/4만 차지함
grid-template:
“(이름)” (row크기)
“(이름)” (row크기)
“(이름)” (row크기)/ (각 column의 크기); //마지막줄에//
.grid {
display: grid;
gap: 10px;
height: 50vh;
grid-template:
"header header header header" 1fr /*높이만 적음*/
"content content content nav" 2fr /*높이만 적음*/
"footer footer footer footer" 1fr / 1fr 1fr 3fr 1fr; /*높이 + 너비까지 정함*/
}
-
3번째 column의 너비가 3fr이니까, 1,2,4column보다 3배 큼
-
이름을 붙일 수도 있음
.grid {
display: grid;
gap: 5px;
height: 50vh;
grid-template:
[header-start] "header header header header" 1fr [header-end]
[content-start] "content content content nav" 2fr [content-end]
[footer-start] "footer footer footer footer" 1fr [footer-end]/ 1fr 1fr 1fr 1fr;
}
- 네이밍은 앞에만 해도되고, 끝에만 해도되고, 둘다 해도됨
댓글남기기