반응형
css grid의 container를 설정할 때 grid속성 만으로 설정하는 방법이 있으나 이는 row와 column의 특성은 한 번에 설정하는 방식이었다. (참고 : CSS3 grid system : Basic container )
row와 colum을 구별하여 설정하기 위해서는 다음과 같이 grid-template-columns와 grid-template-row 속성을 사용하면 된다.
<!--
* css-grid-01-basic.html v0.2.0
* Update: 2019.10.28
* Author: Developer N
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css-grid-01-basic-v0.1.0</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 10% 20% 150px auto auto;
grid-template-rows: 100px auto;
grid-gap: 5px;
}
div > div {
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="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>0</div>
</div>
</body>
</html>
반응형
'CSS3' 카테고리의 다른 글
| [CSS3] 모서리 둥글게 하는 css 요소 border-radius (0) | 2019.12.04 |
|---|---|
| [CSS3] 사용하는 단위계의 종류 (0) | 2019.12.03 |
| [CSS3] outline과 border의 차이 (0) | 2019.12.01 |
| [CSS3] CSS style guide (0) | 2019.11.06 |
| [CSS3] 가로 세로 중앙 정렬 방법(2) (0) | 2019.10.30 |
| [CSS3] 가로 세로 중앙 정렬 방법(1) (0) | 2019.10.29 |
| [CSS3] grid system : cell (0) | 2019.10.29 |
| [CSS3] grid system : Basic container (0) | 2019.10.28 |
DeveloperN
개발자 n의 개발 이야기(draft)