grid-5: auto columns and rows
align-self: child에게 줄 수 있는 속성
<body class="grid">
<div class="header">header</div>
<div class="content">content</div>
<div class="nav">nav</div>
<div class="footer">foote</div>
</body>
.grid {
display: grid;
gap: 5px;
height: 100vh;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
}
.header {
background-color: #2ecc71;
align-self: end;
}
.content {
background-color: #3498db;
}
.nav {
background-color: #8e44ad;
}
.footer {
background-color: #f39c12;
}
- 자식element를 수직방향으로 조정
###justify-self: child에게 줄 수 있는 속성
.grid {
display: grid;
gap: 5px;
height: 100vh;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
}
.header {
background-color: #2ecc71;
align-self: end;
justify-self: center;
}
.content {
background-color: #3498db;
}
.nav {
background-color: #8e44ad;
}
.footer {
background-color: #f39c12;
}
- 자식element를 수평방향으로 조정
place-self : end center
- 첫번째 수직 / 두번째 수평
.grid {
display: grid;
gap: 5px;
height: 100vh;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
}
.header {
background-color: #2ecc71;
place-self: end center;
}
.content {
background-color: #3498db;
}
.nav {
background-color: #8e44ad;
}
.footer {
background-color: #f39c12;
}
grid-auto-rows
grid-auto-flow는 각각의 셀들이 어떻게 배치되는 지에 대한 흐름을 나타낸다.-
기본값은 횡으로 배치되는
grid-auto-flow: row;이다.
그렇기 때문에, 설정된 그리드 셀 갯수보다 많은 아이템들이 선언될 경우,
이 셀들은 높이가 지정되지 않은 채, 가장 아랫쪽에 남는 갯수만큼 배치된다.
이때 필요한 것이grid-auto-rows이다. px을 지정해주면,
여분의 셀들은 이 값의 높이로 배치된다. grid-auto-flow를column으로 설정할 경우,
flex-direction처럼 셀들이 배치되는 것이 횡이 아닌 종이 된다.
따라서, 남는 아이템들은 가장 아랫쪽이 아니라 우측에 배치된다.
이때 필요한 것은grid-auto-column이다.
넓이가 없는 여분의 셀들을 이 키워드를 통해 다시 지정할 수 있다.
Grid-auto-rows
- 세팅해둔 그리드행보다 더 많은 데이터를 불러올 경우가 있다. (재사용성이 떨어짐)
- 자동으로 할당하도록 설정한다면 그리드의 재사용성을 높일 수 있다.
- Grid-template-rows: repeat(4, 100px);
- Grid-auto-rows: 100px;
- 위 같은 상황이면 4줄까지는 계획, 그 이후는 해당 높이로 자동 설정된다.
<body 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>
</body>
.grid {
color: white;
display: grid;
gap: 5px;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
}
.item:nth-child(odd) {
background-color: green;
}
.item:nth-child(even) {
background-color: blue;
}
\ + grid-auto-rows: 100px;4줄까지는 계획, 그 이후는 해당 높이로 자동 설정된다.↓↓
- Grid-auto-flow: column; -> 열 방향으로 추가 항목 형성
.grid {
color: white;
display: grid;
gap: 5px;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
grid-auto-rows: 100px;
grid-auto-flow: column;
}
.item:nth-child(odd) {
background-color: green;
}
.item:nth-child(even) {
background-color: blue;
}
+ grid-auto-columns: 100px; / 4줄이후의 크기는 100px가 됨
minmax(최소너비, 최대너비)
- grid가 최소너비 이하로 작아지지 않게하고, 최대너비까지 커질수 있게 함
- 무조건 지정한 크기를 유지해야하기 때문에 스크롤이 생김
<body 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>
</body
.grid {
color: white;
display: grid;
gap: 5px;
grid-template-columns: repeat(4, minmax(100px, 5fr));
grid-template-rows: repeat(4, 100px);
}
.item:nth-child(odd) {
background-color: green;
}
.item:nth-child(even) {
background-color: blue;
}
댓글남기기