Grid Layout- 그리드2 (grid-template-areas)

 grid-template-areas 

영역이름을 참조(grid-area)해 템플릿 생성

- .마침표를 사용하거나 임의로 준 이름을 입력해 빈 영역을 설정할 수 있음

-> Grid Container에게 적용

 

 grid-area 

그리드 영역 이름 지정

 -> Grid item에게 적용

 

 

▼ 적용 예제 1

    <style>
        .container1{
            border: 5px solid #000;
            background-color: rgb(190, 215, 194);
            display: grid;
            grid-template-areas: 'a a a item item''a a a item item';/*2번 설정/ 첫째줄, 둘째줄 설정 */
           
            /* 'item item a a a';
            >item 2개영역차지/나머지는 a a a 각 1줄씩 배치(임의로 a설정:a아니고 .이어도 됨) */
        }
        .container1>div{
            text-align:center;
            font-size: 30px;
            border: 1px solid #000;
        }
        .container1>div.item{
            background-color: rgb(239, 244, 237);
            grid-area:item;/*1번 설정 -위에 부모랑 같이 사용(2번)
            / 클래스로도 지정가능하지만 아니어도 상관x */
            /*grid-row:2; > 2번째줄 위치 ->3번 설정 (만약 위치한 줄을 바꾸고 싶을때 따로 설정)*/
        }
    </style>

    <div class="container container1">
        <div class="item">1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </div>

 

1

2

3

4

5

6

7

---

▼ 적용 예제 2

    <style>
        .wrap{
            border: 1px solid #000;
            background-color: rgb(237, 198, 54);
            display: grid;
            grid-template-columns:repeat(4,1fr);/* 1fr 4개 */
             /*위에꺼랑 동일 1fr 1fr 1fr 1fr; */
             /* 칸 사이즈 비율 설정 */

            grid-template-areas:'header header header header'
            'mainbanner . content content'
            'footer footer footer footer';
        }
        .wrap>div{border: 1px solid #000;
            margin: 10px;}
        .header{grid-area:header;}
        .mainbanner{grid-area:mainbanner;}
        .content{grid-area:content;}
        .footer{grid-area:footer;}
    </style>
    
    <div class="wrap">
      <div class="header">
        header
      </div>
      <div class="mainbanner">mainbanner</div>
      <div class="content">content</div>
      <div class="footer">footer</div>
    </div>

 

header

mainbanner

content

footer

---

▼ 적용 예제 3 ( repeat(반복횟수,비율), minmax(최소값,최대값), min-content, auto-fill, auto-fit 참고)

<style>
        .wrap{border:5px solid #333;
            padding: 5px;
            background-color: rgb(112, 179, 230);
            display: grid;
            
            /* grid-template-columns:1fr minmax(200px,auto) 1fr;
            /minmax(200px,auto)>>min값이 200px, max값은 auto 최소200,최대자동*/
            /*grid-template-columns: min-content 1fr 1fr;/
            min-content :콘텐츠의 최소넓이*/
            
            grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
            /* auto-fill :컨테이너크기에 설정한거 외에 남으면 남는 그대로 여백 두기
                auto-fit :컨테이너크기에 딱맞게 늘어나서 비율에 맞게 채움 */   
        } 
        .wrap>div{border: 1px solid #000;
            background-color: rgb(189, 220, 235);
            margin:5px; 
        }
        .wrap>div>img{width: 100%;}
    </style>

    <div class="wrap">
        <div><img src='img/client-01.jpg' alt=""></div>
        <div>2</div>
        <div>3</div>
        <div><img src='img/client-01.jpg' alt=""></div>
        <div>5</div>
        <div>6</div>
    </div>

 

*grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); -> auto-fill 설정 후 화면 검사

- 남은 건 여백으로 둠 / img width100%을 잠시 꺼둠

*grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); -> auto-fit 설정 후 화면 검사

- 컨테이너의 크기에 맞게 비율을 늘려서 꽉 채움