<!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>
#wrapper1 {
display:grid;
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
margin-bottom:20px;
}
#wrapper2{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(200px, 1fr));
}
h1{
font-size:24px;
}
.items {
padding:15px;
background-color:#eee;
}
.items:nth-child(odd){
background-color:#bbb;
}
</style>
</head>
<body>
<h1>auto-fit일 때</h1>
<div id="wrapper1">
<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>
<h1>auto-fill일 때</h1>
<div id="wrapper2">
<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 |
