728x90
반응형
display: grid
- column과 row를 설정할 수 있는 display 속성
- display: grid로 설정한 요소는 grid container가 된다.
- display: grid로 설정한 요소는 grid container가 된다.
grid-template-columns
- 컬럼의 개수 및 너비를 지정
- fr을 통해 너비의 비율을 설정할 수 있다.
grid-template-rows
- 행의 개수 및 높이를 지정
column-gap
- 각 컬럼 사이의 간격 설정
row-gap
- 각 행 사이의 간격 설정
< 웹 브라우저로 상세히 보기 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>18_Grid.html</title>
<link rel="stylesheet" href="./assets/css18.css">
</head>
<body>
<h3># display: grid</h3>
<ul>
<li>column과 row를 설정할 수 있는 display 속성</li>
<li>display: grid로 설정한 요소는 grid container가 된다.</li>
<li>내부의 요소들은 grid item이 된다.</li>
</ul>
<div id="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>#grid-container {
display: grid;
/*
# grid-template-columns
- 컬럼의 개수 및 너비를 지정
- fr을 통해 너비의 비율을 설정할 수 있다.
*/
grid-template-columns: 1fr 3fr 100px;
grid-template-rows: 80px 500px 100px; /* 행의 개수 및 높이를 지정 */
column-gap: 5px; /* 각 컬럼 사이의 간격 설정 */
row-gap: 10px; /* 각 행 사이의 간격 설정 */
}
#grid-container > div {
border: solid 3px black;728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS] Position (0) | 2023.06.11 |
|---|---|
| [CSS] Flex (2) | 2023.06.08 |
| [CSS] Display (0) | 2023.06.08 |
| [CSS] Float (0) | 2023.06.08 |
| [CSS] 가상 요소 (0) | 2023.06.07 |
