display: flex; 와 비슷한 성질인 듯하나 display: grid; 는 말그대로 웹 디자인에서 사용하는 그리드 개념과 비슷하다.
flex 처럼 부모에 display: grid;를 설정 한 후, 그 안의 items을 정렬하는 스타일을 추가한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css grid</title>
<style>
* {
margin: 0;
padding: 0;
font-family: 'Nanum Gothic';
}
body {
position: relative;
width: 100%;
height: 100vh;
}
.dis-grid {
display: grid;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 90%;
height: 800px;
margin: 0 auto;
padding: 10px;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, auto);
grid-gap: 10px;
background-color: rgb(128, 0, 128, 0.5);
border-radius: 10px;
text-align: center;
}
.dis-grid__item {
display: inline-grid;
align-items: center;
background-color: rgb(128, 0, 128, 1);
border-radius: 10px;
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<div class="dis-grid">
<div class="dis-grid__item">1</div>
<div class="dis-grid__item">2</div>
<div class="dis-grid__item">3</div>
<div class="dis-grid__item">4</div>
<div class="dis-grid__item">5</div>
<div class="dis-grid__item">6</div>
<div class="dis-grid__item">7</div>
<div class="dis-grid__item">8</div>
</div>
</body>
</html>
grid-template-columns: repeat(4, 1fr);
grid-template-columns 는 각 그리드 아이템의 너비를 결정한다. 테이블에서 column를 생각하면 쉽다.
grid-template-columns: repeat(4, 1fr); 은 grid-template-columns: 1fr 1fr 1fr 1fr;와 같은 말이다.
- repeat()를 사용하면 그리드가 많이 분할될 경우 간략하게 스타일을 추가할 수 있다.
첫번째 숫자는 분할 할 개수 그리고 두번째 요소는 결정할 너비를 쓰면 된다.
- fr 단위는 fraction 분수(분할)의 약자로 이 단위를 사용하면 남은 양에서 자동으로 fr 앞의 숫자 비율만큼 너비가 확정 된다.
만약, grid-template-columns: 1fr 100px 200px 2fr; 라면 정해진 100px와 200px 만큼 가져간 후 나머지에서 1fr과 2fr의 비율이 결정된다.
grid-template-rows: repeat(2, auto);
grid-template-rows 는 각 그리드 아이템의 높이를 결정한다. 테이블에서 row를 생각하면 쉽다.
grid-gap: 10px;
grid-gap은 말그대로 각 그리드 아이템 간의 사이를 얼만큼 띄우냐이다.
'DEVELOP' 카테고리의 다른 글
| [javascript] 디바이스별로 이미지 적용하기 (0) | 2021.01.20 |
|---|---|
| [css] font 설정 (0) | 2021.01.07 |
| [plugin] 슬라이드 플러그인_keen-slider.js (0) | 2020.12.18 |
| [javascript & jQuery] 애니메이션 플러그인_ScrollTrigger In GSAP (0) | 2020.12.18 |
| [mysql] 프로시저 만들기 (0) | 2020.06.09 |
