1. 전체 레이아웃

1) grid 번호 이용

그리드 라인 번호 (column은 1~4번, row는 1~5번이다.)

@media (min-width: 1024px) {
  .page {
    display: grid;
    /* fr은 강제성이 없다...  */
    grid-template-columns: 20% 1fr 20%;
  }
  /* 각 아이템들의 영역을 지정해준다. (위의 그림을 참조한다.)  */
  .header {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
  }
  .menu {
    grid-column: 1 / 4;
    grid-row: 2 / 3;
  }
  .primary {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }
  .secondary-a {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }
  .secondary-b {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
  }
  .footer {
    grid-column: 1 / 4;
    grid-row: 4 / 5;
  }
}

@media (min-width: 1400px) {
  .page {
    display: grid;
    grid-template-columns: 300px 1fr 300px;
  }
}

2) grid-template-area를 이용

각 영역에 이름을 지정해줘서 적용하는 방법

@media (min-width: 1024px) {
	.page {
		display: grid;
		grid-template-columns: 20% 1fr 20%;
		grid-template-areas:
			"  header    header    header   "
			"   menu      menu      menu    "
			"secondary-a primary secondary-b"
			"  footer    footer    footer   ";
	}
	.header {
		grid-area: header;
	}
	.menu {
		grid-area: menu;
	}
	.primary {
		grid-area: primary;
	}
	.secondary-a {
		grid-area: secondary-a;
	}
	.secondary-b {
		grid-area: secondary-b;
	}
	.footer {
		grid-area: footer;
	}
}
@media (min-width: 1400px) {
	.page {
		grid-template-columns: 300px 1fr 300px;
	}
}

2. 카드 리스트

auto-fill을 활용하여 media 쿼리가 없이도 반응형 웹사이트를 만든다.

/* card list */
.card-list {
	display: grid;
	/* 횟수가 아니라 auto-fill을 작성하여 자동으로 채워지게 한다. 
     화면 너비에 따라 반응형으로 column의 개수가 변한다.*/
	grid-template-columns: repeat(auto-fill, minmax(220px, auto));
	column-gap: 2%;
}
.card-item {
	margin-bottom: 2rem;
	background: white;
}
.card-image {
  /* 백그라운드 이미지이기때문에 패딩 바텀을 통해 높이를 준다.  */
	height: 0;
	padding-bottom: 60%;
	background-repeat: no-repeat;
	background-position: center;
	background-color: lightgray;
	background-size: cover;
}
.card-image img {
	display: none;
}
.card-desc {
	padding: 1em;
}