카테고리 없음

[CSS] 모던 그리드 레이아웃

Gilvert 2018. 6. 28. 15:36
728x90




1. 1em 단위


- 상대적 개념의 단위
- 대부분의 브라우저는 폰트 사이즈의 기본값이 12pt, 16px, 1em, 100%
- em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함.
- ex : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함.
- px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐.
- % : percent, 기본글꼴의 크기에 대하여 상대적인 값을 가짐.
- pt : point, 일반 문서(워드 등)에서 많이 사용하는 단위


2. grid-column,row


- grid-column: 1/3;
- grid-row: 1/3;
- 1/3 : 1 to 3라는 의미로 해석해야 함
- 3 x 2 : 가로(1,2,3,4), 세로(1,2,3)






3. 소스코드 예제


<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>

<style>
.wrapper{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-auto-rows: minmax(100px,auto);
grid-gap: 1em;
justify-items: stretch;
align-items: stretch;
}
.wrapper > div{
background: #eee;
padding: 1em;
}
.wrapper > div:nth-child(odd){
background: #ddd;
}

.box1{
/* align-self: start; */
grid-column: 1/3;
grid-row: 1/3;
}

.box2{
/* align-self: end; */
grid-column: 3;
grid-row: 1/3;
}

.box3{
/* align-self: end; */
grid-column: 2/4;
grid-row: 3;
}

.box4{
/* align-self: start; */
grid-column: 1;
grid-row: 2/4;
border:#333 1px solid
}

</style>
</head>
<body>
<div class="wrapper">
<div class="box box1">BOX1</div>
<div class="box box2">BOX2</div>
<div class="box box3">BOX3</div>
<div class="box box4">BOX4</div>
</div>
</body>
</html>


가우넷 구름 USB 충전식 양면 대용량 보조배터리 손난로, 단일 상품, 화이트



"파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음"