200907__CSS Layout: Grid

CSS Grid Basic Concepts

grid-template-coloums

grid-template-rows

column-gap

row-gap

gap

.father {
  display: grid;
  grid-template-columns: 250px 250px 250px; /* 열 너비 조절 */
  grid-template-rows: 100px 50px 300px;  /* 행 너비 조절 */
  column-gap: 10px;
  row-gap: 10px;      /* gap: 10px 로 합칠 수 있음 */
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 200px); /* grid에 repeat 함수 이용 */
  grid-template-rows: repeat(4, 300px);
}

Grid-template-areas is so freaking cool

.grid {
  display: grid;
  grid-template-columns: auto 200px; /* 꽉 채워줌 */
  grid-template-rows: repeat(4, 200px);
  grid-template-areas:
    "header header header header"
    "content content content nav"
    "content content content nav"
    "footer footer footer footer";
}

.header {
  background-color: #2ecc71;
  grid-area: header;
}
.content {
  background-color: #3498db;
  grid-area: content;
}
.nav {
  background-color: #8e44ad;
  grid-area: nav;
}
.footer {
  background-color: #f39c12;
  grid-area: footer;
}

Rows and Columns

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
}

.header {
  background-color: #2ecc71;
  /* grid-column-start: 1;
  grid-column-end: 5; 를 아래와 같이 축약 가능 */
	grid-column: 1 / 5;
}

.content {
  background-color: #3498db;
  grid-column: 1 / -2;
  grid-row: 2 / span 2; /* 시작점 정해주기 */
}

.nav {
  background-color: #8e44ad;
  /* grid-row: 2 / 4; 를 아래와 같이 축약 가능 */
	grid-row: span 2;
}

.footer {
  background-color: #f39c12;
  /* grid-column-start: 1;
  grid-column-end: 5; 를 아래와 같이 쓸 수 있음*/
	grid-column: 1 / -1; 
}

CSS 선택자(Selector) :nth-child(), :nth-last-child()

:nth-child()는 앞에서 () 순서에 있는 요소 선택

:nth-last-child() 뒤에서 () 순서에 있는 요소 선택