front_end/css-sass
grid-alignment (justify-content, align-content)
joepasss
2022. 5. 28. 12:46
justify-content, align-content
미리보기
item-1
item-2
item-3
item-4
item-5
item-6
item-7
item-8
justify-content
align-content
start, center, end, space-around, space-between, space-evenly 의 값을 적용할 수 있다
이전 justify-items, align-items와 같이 부모 요소에 적용하면 된다
코드 예시
section.grid-container {
height: 100vh;
display: grid;
grid-template-columns: repeat(4, 10%);
grid-template-rows: repeat(2, 150px);
background-color: rgb(255, 255, 255);
justify-content: start;
align-content: start;
div.item {
font-size: 1.5rem;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 3px;
background-color: rgb(209, 209, 209);
border: 1px solid rgb(125, 125, 125);
}
}
place-content
place-items와 거의 동일하다. 마찬가지로 부모요소에 적용가능하고 <align-content> <justify-content>의 값을 가진다
/* align-content justify-content */
place-content: start end;
적용 예시
section.grid-container {
height: 60vh;
display: grid;
grid-template-columns: repeat(4, 10%);
grid-template-rows: repeat(2, 150px);
background-color: rgb(181, 181, 181);
place-content: start end;
div.item {
font-size: 1.5rem;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
letter-spacing: 3px;
background-color: rgb(209, 209, 209);
border: 1px solid rgb(125, 125, 125);
}
}