♥ 코딩(Coding)/반응형

( 공부복습 ) grid 레이아웃

디자이너 윈썸 2022. 2. 7. 16:21

▶ grid : 두방향으로 나아가며 형태를 만들 수 있어서 다양하게 레이아웃이나

             그리드 형태에 해당하는 부분을 만들 때 사용

 

** grid ontainer를 위한 속성

- display : grid

부모박스에 grid선언시 안쪽의 자식 요소를 grid item으로 변환하여 사용가능함

- grid-template-olumns : item을 수평방햐으로 분배되어지는 값을 설정 하는 속성

단위 > px, %, fr, minmax...

- grid-template-rows :  item을 수직방향으로 분배되어지는 값을 설정 하는 속성  
   단위 > px,%,fr,minmax ....

ㄴ 2개 동시 적용 / 단축단위 grid-template

 - grid-auto-columns :   item을 수평방향으로 폭을 자동으로 분배하는 속성  

  - grid-auto-rows:   item을 수직방향으로 폭을 자동으로 분배하는 속성  

▶ 단위 및 함수에 대한 설명  
    mixmax (최소값,최대값)  
    fraction : 분배,분수  =  1fr / 1씩 분배  
    repeat (반복횟수,반복값)  
    auto-fill / auto-fit  화면을 꽉채우고자하는 값 

 

- column-gap(grid-column-gap) : 열과 열 사이의 간격 혹은 틈을 정의 
   단위 > px,%,vw,vh,em,rem...

 - row-gap(grid-row-gap) : 행과 행 사이의 간격 혹은 틈을 정의 
   단위 > px,%,vw,vh,em,rem...

 └ 2개 동시 적용  / 단축단위  gap(grid-gap)



 - grid-auto-flow : 자동으로 item을 배치하는 알고리즘 속성  
   └ row(기본값)  각 행 축에 따라 차례로 배치 되는 값  
   └ column  각 열 축에 따라 차례로 배치 되는 값  
   └ dense(row dense)  축방향에서 행에 따라 빈 영역을 자동으로 배치  
   └ column dense 축방향에서 열에 따라 빈 영역을 자동으로 배치

 ▶ 정렬
 - align-content :  그리드안의 콘텐츠를 그룹으로 수직 정렬 ( 아이템이 부모의 높이보다 작을 경우 )
   └ stretch(기본값)  늘어나는 상태  
   └ start  축방향에서 시작점으로부터 정렬  
   └ center 축방향에서 가운데로 정렬
   └ end  축방향에서 끝점으로부터 정렬  
   └ space-between item요소를 좌우 여백을 모두 사용하면서 분배하는 정렬  
   └ space-around item요소의 좌우여백을 두며 분배 정렬  
   
 - justify-content :  그리드안의 콘텐츠를 그룹으로 수평 정렬 ( 아이템이 부모의 넓이보다 작을 경우 )
   └ stretch(기본값)  늘어나는 상태  
   └ start  축방향에서 시작점으로부터 정렬  
   └ center 축방향에서 가운데로 정렬
   └ end  축방향에서 끝점으로부터 정렬  
   └ space-between item요소를 좌우 여백을 모두 사용하면서 분배하는 정렬  
   └ space-around item요소의 좌우여백을 두며 분배 정렬  


   └ 2개 동시 적용  / 단축단위  place-content : align justify

 - align-items : 그리드 아이템들을 수직 정렬
   └ stretch(기본값)  늘어나는 상태  
   └ start  축방향에서 시작점으로부터 정렬  
   └ center 축방향에서 가운데로 정렬
   └ end  축방향에서 끝점으로부터 정렬  


 - justify-items : 그리드 아이템들을 수평 정렬
   └ stretch(기본값)  늘어나는 상태  
   └ start  축방향에서 시작점으로부터 정렬  
   └ center 축방향에서 가운데로 정렬
   └ end  축방향에서 끝점으로부터 정렬  


   └  2개 동시 적용  / 단축단위  place-items : align justify

<body>

    <div class="container">
        <div class="item">11</div>
        <div class="item">22</div>
        <div class="item">33</div>
        <div class="item">44</div>
        <!-- <div class="item">55</div> -->
        <div class="item">
           Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
            been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of                type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the                leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
            release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
            software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
        <div class="item">66</div>
        <div class="item">77</div>
        <div class="item">88</div>
        <div class="item">99</div>
    </div>

</body>
<style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            padding: 10px;
            background-color: antiquewhite;
            /* CHECK>> display: grid > grid 성격을 부모요소에 설정 */
            display: grid;
            /* 수평방향의 분배값을 설정 - 단위 : px, %....*/
            /* grid-template-columns: 100px 200px 300px 400px; */
            /* grid-template-columns: 10% 80% 10%; */

            /* fraction >> 분배,분수 */
            /* grid-template-columns: 1fr 500px 1fr; */

            /* repeat(반복횟수, 반복값) */
            /* grid-template-columns: repeat(5, 1fr); */
            /* grid-template-columns: repeat(2, 1fr 3fr); */

            /* minmax(최소값, 최대값) */
            /* grid-template-columns: repeat(3, minmax(100px, 300px)); */

            /* auto-fill / auto-fit  갯수를 떠나 화면을 꽉채우고자하는 속성 */
            /* grid-template-columns: repeat(auto-fit, minmax(10%, auto)); */

            /* 수평방향의 분배값을 설정 - 위의 값과 동일
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: 200px 200px 200px;
            grid-template-rows: repeat(3, 1fr);*/
            grid-template-columns: repeat(2, 1fr);
            /* grid-template-rows: repeat(3, minmax(100px, auto)); */
            /* height: 40vh; */


            /* 높이를 계속 지정하기 애매한 경우 auto값을 사용  grid-auto-columns*/
            grid-auto-rows: minmax(200px, auto);

        }

        .item {
            border: 3px solid #000;
            background-color: aquamarine;
        }
    </style>
<body>

    <div class="container">
        <div class="item">11</div>
        <div class="item">22</div>
        <div class="item">33</div>
        <div class="item">44</div>
        <div class="item">55</div>
        <div class="item">66</div>
        <div class="item">77</div>
        <div class="item">88</div>
        <div class="item">99</div>
        <div class="item">10</div>
        <div class="item">11</div>
        <div class="item">12</div>
    </div>

</body>
 
<style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            padding: 10px;
            background-color: antiquewhite;
            /* CHECK>> display: grid > grid 성격을 부모요소에 설정 */
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(3, 1fr);
            height: 50vh;


            /* gap - 이전번전 >> grid-gap... */
            /* column-gap: 10px;
            row-gap: 20px; */
            gap: 10px 20px;
            /* row column */
        }

        .item {
            border: 3px solid #000;
            background-color: aquamarine;
        }
    </style>

imde2.html
0.00MB
index.html
0.00MB

 

저작자표시 비영리 변경금지 (새창열림)