* 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을 가지고 있다.
* 별로 선호하지 않는 방식
'Study > HTML,CSS' 카테고리의 다른 글
[CSS_study] display : grid_5 place-items & place-content (0) | 2022.05.17 |
---|---|
[CSS_study] display : grid_4 grid-template & fr (fraction) (0) | 2022.05.17 |
[CSS_study] display : grid_2 (grid-column) (0) | 2022.05.14 |
[CSS_study] display : grid (0) | 2022.05.13 |
[CSS_study] flex-basis (flex-shrink 와 flex-grow 를 위한 기본 세팅) (0) | 2022.05.13 |