<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그리드 항목의 간격 지정하기 </title>
<style>
#wrapper{
display:grid;
grid-template-columns:repeat(3,200px);
grid-template-rows:minmax(100px,auto);
grid-gap:20px 30px; /*칼럼 간격 30px, 줄 간격 20px*/
}
.items {
padding:15px;
background-color:#eee;
}
.items:nth-child(odd) {
background-color:#bbb;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="items">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta nesciunt magni voluptatem.</div>
<div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div class="items">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius nulla corrupti porro!</div>
<div class="items">Lorem ipsum dolor sit.</div>
<div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, quos!</div>
<div class="items">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro odit quam sit.</div>
</div>
</body>
</html>
'css' 카테고리의 다른 글
| 12장 예제- 템플릿 영역을 만들어 배치하기 (0) | 2023.04.04 |
|---|---|
| 12장 예제- 그리드 라인을 사용해서 항목 배치하기 (0) | 2023.04.04 |
| 12장 예제- 자동으로 칼럼 개수 조절하기 (0) | 2023.04.04 |
| 12장 예제 - 칼럼과 줄 크기를 자동으로 지정하기 (0) | 2023.04.04 |
| 12장 예제- 그리드 박스에서 칼럼과 줄 지정하기 (0) | 2023.04.04 |
