[CSS] grid

Grid - 두 방향(가로-세로) 레이아웃 시스템 (2차원)

<div class="container">
	<div class="item">A</div>
	<div class="item">B</div>
	<div class="item">C</div>
	<div class="item">D</div>
	<div class="item">E</div>
	<div class="item">F</div>
	<div class="item">G</div>
	<div class="item">H</div>
	<div class="item">I</div>
</div>

Grid Container

ex) 부모 요소 div.container

Grid Item

ex) 자식 요소 div.item

Grid의 영향을 받는 전체 공간이 container이다. 설정된 속성에 따라 각 아이템들이 어떠한 형태로 배치되는 것이다

.container {
	display: grid;
}

• Flex처럼, 컨테이너에 display:grid; 를 설정한다

Grid 속성

• 컨테이너에 적용하는 속성
• 아이템에 적용하는 속성

두가지로 나뉜다!

Grid 형태 정의

• grid-template-rows
• grid-template-columns

.container {
	grid-template-columns: 200px 200px 500px;//column을 200px, 200px, 500px로 만들겠다
	/* grid-template-columns: 1fr 1fr 1fr */
  //숫자 비율대로 트랙의 크기를 나눈다.
//즉 위의 1fr 1fr 1fr은 균일하게 1:1:1 비율인 3개의 column을 만든다.
	/* 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 */
}

아우 귀찮아......여기까지만...쓸래...