[CSS_study] display : grid_3 (Line Naming)

* Layout using named grid lines

• grid-template-rows 및 grid-template-columns 속성으로 그리드를 정의할 때 그리드의 일부 또는 모든 라인에 이름을 지정할 수 있다.

* Line Naming (예시코드)

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: [first-line] 100px [second-line] 100px [third-line] 100px [fourth-line] 100px [fifth-line];
  grid-template-rows: repeat(4, 100px [row-line]);
}

.header {
  background-color: #2ecc71;
  grid-column: span 4;
}
.content {
  background-color: #3498db;
  grid-column: first-line / fourth-line;
  grid-row: row-line 1 / row-line 3;
}
.nav {
  background-color: #8e44ad;
  grid-row: span 2;
}
.footer {
  background-color: #f39c12;
  grid-column: span 4;
}

 

(참고) https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines

(참고) flex는 1차원이다. column만 가지고 있다. 행은 없다.
(참고) grid는 2차원 layout이다. row, column을 가지고 있다.

 

* 별로 선호하지 않는 방식