4) item 에서 사용가능한 속성
a. Container 속성에서 설정된 justify-items 와 align-items 재정의
.item-1 {
justify-self: center | flex-start | flex-end | ...
align-self: center | flex-start | flex-end | ...
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>justify-items 재정의 justify-self / align-items 재정의 align-self</title>
<style type="text/css">
.item-1 {
background-color: antiquewhite;
}
.item-2 {
background-color: red;
}
.item-3 {
background-color: blue;
}
.item-4 {
background-color: aqua;
/* item 4 만 재정의 */
justify-self: flex-end;
align-self: flex-end;
}
.item-5 {
background-color: skyblue;
}
.item-6 {
background-color: purple;
}
.grid-container {
border: 3px solid red;
}
.grid-container {
margin: 20px;
display: grid;
grid-auto-flow: row;
height: 500px;
grid-template-columns: 50% 50%;
/*
height 값에 따라서 2행이 크기가 동적으로 변경.
최대한 height 에 맞춰줌
*/
grid-template-rows: 100px minmax(10px, 400px) 50px;
/* 셀안의 item x 축 정렬(배치) */
justify-items: center;
/* 셀안의 item y 축 정렬(배치) */
align-items: flex-end;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item-1">item1</div>
<div class="item-2">item2</div>
<div class="item-3">item3</div>
<div class="item-4">item4</div>
<div class="item-5">item5</div>
<div class="item-6">item6</div>
</div>
</body>
</html>
b. 원하는 위치에 배치 1 - 위치의 번호로 배치
.item-3 {
grid-column-start: 2;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 3;
}
축약표현식
grid-column: start / end ;
ex) grid-column: 2 / 5;
grid-row: start / end ;
ex) grid-row: 1 / 3;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>원하는위치에 요소배치1 - 위치값이용1_column</title>
<style type="text/css">
.item-1 {
background-color: antiquewhite;
}
.item-2 {
background-color: red;
/*
2번은 현재 행에 배치가 가능해서
개행(새로운줄)없이 현재줄에 적용됨.
*/
/* grid-column-start: 2;
grid-column-end: 5; */
/* 축약표현식 */
grid-column: 2/5;
}
.item-3 {
background-color: blue;
/*
3번은 번호 2부터 5까지 차지함.
2번과 한줄에 배치가 불가능하기 때문에
다음라인에 배치됨.
4번은 3번과 한줄에 배치가 불가능해서
다음라인에 배치됨.
*/
/* grid-column-start: 2;
grid-column-end: 5; */
/* 축약표현식 */
grid-column: 2/5;
}
.item-4 {
background-color: aqua;
}
.grid-container div {
height: 80px;
}
.grid-container {
margin: 20px;
display: grid;
grid-template-columns: repeat(4, 250px);
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item-1">item1</div>
<div class="item-2">item2</div>
<div class="item-3">item3</div>
<div class="item-4">item4</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>원하는위치에 요소배치1 - 위치값이용2_row</title>
<style type="text/css">
.item-1 {
background-color: antiquewhite;
}
.item-2 {
background-color: red;
grid-column: 2/5;
}
.item-3 {
background-color: blue;
grid-column: 2/5;
/* row */
/* grid-row-start: 3;
grid-row-end: 4; */
/* 축약표현식 */
grid-row: 3/4;
}
.item-4 {
background-color: aqua;
/* row */
/* grid-row-start: 2;
grid-row-end: 3; */
/* 축약표현식 */
grid-row: 2/3;
}
.grid-container div {
height: 80px;
}
.grid-container {
margin: 20px;
display: grid;
grid-template-columns: repeat(4, 250px);
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item-1">item1</div>
<div class="item-2">item2</div>
<div class="item-3">item3</div>
<div class="item-4">item4</div>
</div>
</body>
</html>
c. 원하는 위치에 배치 2 - 위치 와 갯수
.item-3{
grid-column-start:2
grid-column-end: span 3;
grid-row-start:1
grid-row-end: span 2;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>원하는위치에 요소배치2 - 위치 & span 갯수</title>
<style type="text/css">
.item-1 {
background-color: antiquewhite;
}
.item-2 {
background-color: red;
/* 2번은 현재 행에 배치가 가능해서 새로운 줄없이
현재줄에 적용됨.
*/
/* grid-column-start: 2;
grid-column-end: span 3; */
grid-column: 2/span 3;
}
.item-3 {
background-color: blue;
/*
3번은 번호 2부터 5까지 차지함.
2번과 한줄에 배치가 불가능하기 때문에
다음라인에 배치됨.
4번은 3번과 한줄에 배치가 불가능해서
다음라인에 배치된.
*/
/* grid-column-start: 2;
grid-column-end: span 3; */
grid-column: 2/ span 3;
/* grid-row-start: 3;
grid-row-end: span 2; */
grid-row: 3/span 2;
}
.item-4 {
background-color: aqua;
/* grid-row-start: 2;
grid-row-end: 3; */
grid-row: 2/3;
}
.item-5 {
background-color: yellow;
}
.item-6 {
background-color: blueviolet;
}
.grid-container div {
height: 80px;
}
.grid-container {
margin: 20px;
display: grid;
grid-template-columns: repeat(4, 250px);
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item-1">item1</div>
<div class="item-2">item2</div>
<div class="item-3">item3</div>
<div class="item-4">item4</div>
</div>
</body>
</html>
d. 원하는 위치에 배치 3 - 셀 이름
가. 셀 이름 지정 ( container 에서 지정 )
- "" 가 행의 갯수
- " " 안의 값이 열이름
- 열은 따로 지정 가능하지만 같이 지정가능하다.
- 구분은 공백으로 해야한다.
- 갯수는 정확하게 일치해야하기에 하나라도 빠지면 안된다.
.container {
grid-template-areas: " header header header1 header1 "
" . . main main "
" footer1 footer2 footer3 footer4 "
}
<== 셀명을 생략가능.
하지만, ``. (도트)`` 를 지정해서 갯수는 일치해야됨.
나. 요소 배치 ( item 속성에서 지정 )
.item-1 {
grid-area: main ;
}
.item-2 {
grid-area: header ;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>원하는위치에 요소배치3 - 셀 이름이용</title>
<style type="text/css">
.item-1 {
background-color: antiquewhite;
grid-area: footer3;
}
.item-2 {
background-color: red;
}
.item-3 {
background-color: blue;
grid-area: main;
}
.item-4 {
background-color: aqua;
}
.grid-container div {
height: 80px;
}
.grid-container {
margin: 20px;
display: grid;
grid-template-columns: repeat(4, 250px);
grid-template-rows: 100px 5rem 100px;
grid-template-areas: " header header header1 header1 "
" . . main main "
" footer1 footer2 footer3 footer4 "
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item-1">item1</div>
<div class="item-2">item2</div>
<div class="item-3">item3</div>
<div class="item-4">item4</div>
</div>
</body>
</html>
'Programming > HTML & CSS & JavaScript' 카테고리의 다른 글
| js 1일차 - 개요, 식별자, 변수, 상수 (1) | 2024.05.02 |
|---|---|
| CSS 총정리 (2) | 2024.05.02 |
| CSS 5일차 - Grid(2) Gap, 정렬, auto-rows (0) | 2024.05.02 |
| CSS 5일차 - Grid(1) 행 과 열 (0) | 2024.05.02 |
| CSS 5일차 - FlexBox(2) (1) | 2024.04.26 |
