gird system

CSS Grid는 2차원(row과 column)의 레이아웃 시스템을 제공합니다.

 

사용 방법: display:[grid],[inline-grid]

 

<style>
.grid-container {
  display: grid;
  }
</style>

 <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>

부모 container 에 display:grid 를 주었지만 화면 변화는 없다.

 

부모 container 에 display:grid 주었지만 화면상 변화는 없다.

grid-template-column - 그리드 열의 라인 이름과 트랙 크기 조정 기능 정의

/* Keyword value */
grid-template-columns: none;

/* <track-list> values */
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);
grid-template-columns: subgrid;
grid-template-columns: masonry;

/* <auto-track-list> values */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns:
  minmax(100px, max-content)
  repeat(auto-fill, 200px) 20%;
grid-template-columns:
  [linename1] 100px [linename2]
  repeat(auto-fit, [linename3 linename4] 300px)
  100px;
grid-template-columns:
  [linename1 linename2] 100px
  repeat(auto-fit, [linename1] 300px) [linename3];

/* Global values */
grid-template-columns: inherit;
grid-template-columns: initial;
grid-template-columns: revert;
grid-template-columns: revert-layer;
grid-template-columns: unset;

grid,inline-grid 차이점  

grid - 블록형식

inline-grid -인라인 형식

display:inline-grid

 

display:grid

요소를 1행 9열로 넓이 100px씩  배치시키기  - display:grid

와! 열 갯수만큼 이걸 다 적어야한다고?? 살려줘~~~

부모요소를 100% 로 보고 자식 요소들이 자동으로 width 를 나눠 가짐.

부모 요소 100% 기준으로 자식요소들이 비율대로 나눠가짐(fr - fraction)

 자 그럼 이제 살려주겠음~

우리에겐 repeat(몇개의 열, 비율(너비))가 있으니까~

9개의 열을 만들꺼고 100px 의 너비로 만들자.

9개의 열을 비율로 나누기

1행 9열 중 2열은 100px 의 너비 나머지는 비율대로 나눠갖기

3행 3열 같은 비율 만들기

3열(넓이 200px)3행 (높이 첫번째 행 100px,두번째행 200px, 세번째 행 300px)

 

3개의 행 높이 100px - 

  grid-template-rows:repeat(3,100px);

 

행의 갯수와 상관없이 일정한 높이 넣기

 

contents의 양이 많을 경우 내용물이 박스 바깥까지 넘쳐 흐름 이럴 경우  기본 높이는 100px 로 설정하되 내용물이 많은 요소는 내용물의 높이만큼 설정하기

grid-auto-rows:minmax(100px,auto);