おしゃれなライオンみたいFE 2期-13


12日目チャレンジ(220413)


グリッドの整理


grid

flex보다 좀 더 복잡한 레이아웃을 위해 사용한다.
  • grid container
  • display:grid를 적용하는 grid의 전체 영역이다.
  • grid item
  • grid 컨테이너의 자식요소들이다. grid 규칙에 의해 아이템들이 배치된다.
  • grid track
  • grid의 행(row), 열(column)
  • grid cell
  • grid의 한칸을 가르킨다. grid 아이템 하나가 들어가는 가상의 칸(틀)
  • grid line
  • grid 셀을 구분하는 선
  • grid line
  • grid의 셀을 구분하는 선
  • メッシュ番号
  • grid 라인의 각 번호
  • grid gap
  • grid 셀 사이의 간격
  • grid area
  • grid 라인으로 둘러싸인 사각형 영역, grid셀의 집합
  • grid-template-rows:行の配置
    grid-template-columns:列のレイアウト
  • .container {
    	grid-template-columns: 200px 200px 500
        grid-template-columns: 1fr 1fr 1fr 
    	 grid-template-columns: repeat(3, 1fr) 
    	 grid-template-columns: 200px 1fr 
    	 grid-template-columns: 100px 200px auto 
    
    	grid-template-rows: 200px 200px 500px;
    	 grid-template-rows: 1fr 1fr 1fr 
    	 grid-template-rows: repeat(3, 1fr) 
    	 grid-template-rows: 200px 1fr 
    	 grid-template-rows: 100px 200px auto 
    }
  • repeat関数:repeat(繰り返し回数、繰り返し値)
  • .container {
    	grid-template-columns: repeat(5, 1fr);
    	 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 
    }

  • minmax関数:最大値と最小値の指定
    	minmax(100px, auto)의 의미는 최소한 100px, 최대는 자동으로(auto) 늘어나게.. 입니다. 즉 아무리 내용의 양이 적더라도 최소한 높이 100px은 확보하고, 내용이 많아 100px이 넘어가면 알아서 늘어나도록 처리해 준 예시이다.
  • .container {
    	grid-template-columns: repeat(3, 1fr);
    	grid-template-rows: repeat(3, minmax(100px, auto));
    }
  • 行-gap、column-gap、gap:gridセル間隔設定
  • .container {
    	row-gap: 10px;
    	 row의 간격을 10px로 
    	column-gap: 20px;
    	 column의 간격을 20px로 
    }
  • grid-column-start
    grid-column-end
    grid-column
    grid-row-start
    grid-row-end
    grid-row
  • align-items:物品縦配列
  • .container {
    	align-items: stretch;
    	 align-items: start; 
    	 align-items: center; 
    	 align-items: end; 
    }
  • prevident-items:物品横配列
  • .container {
    	justify-items: stretch;
    	 justify-items: start; 
    	 justify-items: center; 
    	 justify-items: end; 
    }
  • align-content:品目群縦配列
  • .container {
    	align-content: stretch;
    	 align-content: start; 
    	 align-content: center; 
    	 align-content: end; 
    	 align-content: space-between; 
    	 align-content: space-around; 
    	 align-content: space-evenly; 
    }
  • prevident-content:プロジェクトグループの横方向配列
  • .container {
    	justify-content: stretch;
    	 justify-content: start; 
    	 justify-content: center; 
    	 justify-content: end; 
    	 justify-content: space-between; 
    	 justify-content: space-around; 
    	 justify-content: space-evenly; 
    }
    手で描いたので、もっとよく理解できます!
    明日も例題を作る