개발(Web)/Web

[CSS] Grid 자동정렬

shinyelee 2022. 1. 22. 14:56

grid: auto-placement

005.html

<!DOCTYPE html>
<html lang="en">
  <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" />
    <link rel="stylesheet" href="005.css" />
    <title>Auto</title>
  </head>
  <body>
    <div class="grid">
      <!-- .item*20>{$} -->
      <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>

005.html

.grid {
  background-color: black;
  color: white;
  display: grid;
  gap: 5px;
  height: 100vh;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
}

.item:nth-child(odd) {
  background-color: springgreen;
}

.item:nth-child(even) {
  background-color: deepskyblue;
}

설정한 grid(4X4)보다 item이 많으면 초과하는 item들의 높이는 자동으로 background에 맞춰 표현된다.
height를 늘리면
설정을 초과하는 item들(17~50번)의 높이도 늘어나고(stretch)
height를 줄이면
background 높이가 모자라기 때문에 설정을 초과하는 item들(17~50번)의 높이가 텍스트 크기에 맞춰 최소화 된다(이게 기본값임).
물론 애초에 item들의 수에 맞춰서 grid-template-rows를 설정하면 되지만
row나 column의 수에 변화가 생기면 다시 계산기를 두드려보고 고쳐야 한다는 귀찮음이 있다.

grid-auto-rows

이 때 필요한 게 grid-auto-rows다.
grid-auto-rows: 100px;은 기존에 설정한 grid-template-rows보다 실제 content가 더 많아지면 자동으로 높이가 100px인 row를 생성한다.

grid-auto-flow

위 예시처럼 진행 방향을 90도 바꾸고 싶을 때, 즉 row가 아니라 column을 생성하고 싶을 때는
grid-auto-flow: column;이라고 설정하면 된다.

grid-auto-columns

grid-auto-columns도 grid-auto-rows와 동일한 역할을 한다.
grid-auto-columns: 100px;은 기존에 설정한 grid-template-columns보다 content가 더 많을 때 자동으로 높이가 120px인 column을 생성한다.

번외(Grid Garden)

여러 포스트에 걸쳐 grid layout에 대해 다뤄 봤다. 아래 게임을 해 보면서 제대로 이해해 보자.

 

Grid Garden

A game for learning CSS grid layout

cssgridgarden.com

참고

 

Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets | MDN

In addition to the ability to place items accurately onto a created grid, the CSS Grid Layout specification contains rules that control what happens when you create a grid and do not place some or all of the child items. You can see auto-placement in actio

developer.mozilla.org

 

grid-auto-rows - CSS: Cascading Style Sheets | MDN

The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track or pattern of tracks.

developer.mozilla.org

 

grid-auto-flow - CSS: Cascading Style Sheets | MDN

The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

developer.mozilla.org

 

grid-auto-columns - CSS: Cascading Style Sheets | MDN

The grid-auto-columns CSS property specifies the size of an implicitly-created grid column track or pattern of tracks.

developer.mozilla.org

반응형

'개발(Web) > Web' 카테고리의 다른 글

[CSS] normalize.css  (0) 2022.01.24
[CSS] reset.css  (0) 2022.01.23
[CSS] Grid Item 정렬하기  (0) 2022.01.21
[CSS] Grid Container 정렬하기  (0) 2022.01.20
[CSS] Grid Items 정렬하기  (0) 2022.01.19

'개발(Web)/Web'의 다른글

  • 현재글[CSS] Grid 자동정렬

관련글

댓글

티스토리툴바