* place-self : [수직] [수평] (child에만 적용되는 property)
- justify-self : child의 수평
- align-self : child의 수직
- 이 둘을 다 포함한게 place-self : align-self/justify-self 순서
* grid-auto-rows: (크기)
- default value를 설정해두어 내가 만들어놓은 row보다 더 많은 content가 있으면, 자동으로 row를 만든다.
- 얼마나 많은 element들을 가지는지 상관하지 않을 때 사용
* grid-auto-flow: (방향) [기본값: row]
- flex-direction과 비슷하다.
- 새로운 row를 만들지, 새로운 column을 만들지에 대한 방향을 결정한다.
* grid-auto-columns: (크기);
- grid-auto-flow: column;일때 작동한다.
* place-self 예시코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="test.css"/>
</head>
<body>
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
.grid {
color: white;
display: grid;
gap: 5px;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
grid-auto-flow: row;
}
.item:nth-child(odd) {
background-color: #2ecc71;
place-self: start stretch;
}
.item:nth-child(even) {
background-color: #3498db;
}
* grid-auto-rows 예시코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="test.css"/>
</head>
<body>
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
<div class="item">19</div>
<div class="item">20</div>
<div class="item">21</div>
<div class="item">22</div>
<div class="item">23</div>
<div class="item">24</div>
<div class="item">25</div>
<div class="item">26</div>
<div class="item">27</div>
<div class="item">28</div>
<div class="item">29</div>
<div class="item">30</div>
<div class="item">31</div>
<div class="item">32</div>
<div class="item">33</div>
<div class="item">34</div>
<div class="item">35</div>
<div class="item">36</div>
<div class="item">37</div>
<div class="item">38</div>
<div class="item">39</div>
<div class="item">40</div>
<div class="item">41</div>
<div class="item">42</div>
<div class="item">43</div>
<div class="item">44</div>
<div class="item">45</div>
<div class="item">46</div>
<div class="item">47</div>
<div class="item">48</div>
<div class="item">49</div>
<div class="item">50</div>
</div>
</body>
</html>
.grid {
color: white;
display: grid;
gap: 5px;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
grid-auto-flow: row;
grid-auto-rows: 100px;
}
.item:nth-child(odd) {
background-color: #2ecc71;
}
.item:nth-child(even) {
background-color: #3498db;
}
* grid-auto-columns 예시코드
.grid {
color: white;
display: grid;
gap: 5px;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
grid-auto-flow: column;
grid-auto-columns: 100px;
}
.item:nth-child(odd) {
background-color: #2ecc71;
}
.item:nth-child(even) {
background-color: #3498db;
}
![[CSS_study] display : grid_6 place-self & auto columns and rows](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbq3UeN%2FbtrCsjnFx4p%2FwZfkE9pqGiqsclbbTzpuv0%2Fimg.png)