fix : 레이아웃에 즐겨찾기 영역 추가
parent
edb081e827
commit
b23c13710f
@ -1,35 +1,36 @@
|
|||||||
/* CSS그리드 */
|
/* CSS그리드 */
|
||||||
div.layoutWrapper {
|
div.layoutWrapper {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
grid-template-columns: fit-content(16.25rem) auto fit-content(16.25rem);
|
||||||
grid-template-rows : 2.2rem minmax(27rem,54rem) 2.2rem;
|
grid-template-rows : 2.2rem minmax(27rem,54rem) 2.2rem;
|
||||||
grid-auto-flow: column;
|
grid-auto-flow: column;
|
||||||
grid-column-gap: 10px;
|
grid-column-gap: 10px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
|
||||||
div.layoutWrapper.hamberger-open {
|
|
||||||
grid-template-columns: 16.25rem auto;
|
|
||||||
transition: all 1s;
|
transition: all 1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.layoutWrapper.hamberger-close {
|
|
||||||
grid-template-columns: fit-content(16.25rem) auto;
|
|
||||||
transition: all 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.layoutWrapper > nav {
|
div.layoutWrapper > nav {
|
||||||
grid-row: 1 / 4;
|
grid-area : 1 / 1 / 4 / 2;
|
||||||
grid-column: 1 / 2;
|
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
div.layoutWrapper > header {
|
div.layoutWrapper > header {
|
||||||
grid-column: 2 / 3;
|
grid-area : 1 / 2 / 2 / 4;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
div.layoutWrapper > main {
|
div.layoutWrapper > main {
|
||||||
grid-column: 2 / 3;
|
margin-right: 3rem;
|
||||||
|
grid-area : 2 / 2 / 3 / 4;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.layoutWrapper > footer {
|
div.layoutWrapper > footer {
|
||||||
grid-column: 2 / 3;
|
grid-area : 3 / 2 / 4 / 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.layoutWrapper > aside {
|
||||||
|
border: 1px solid black;
|
||||||
|
z-index:1;
|
||||||
|
grid-area : 2 / 3 / 3 / 4;
|
||||||
}
|
}
|
Loading…
Reference in New Issue