본문 바로가기
[study]이론정리/HTML & CSS & JavaScript

CSS 5일차 - Grid(3) item 속성

by yoon9i 2024. 5. 2.

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>

 

'[study]이론정리 > 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

관련글

티스토리툴바