Try it
에디터 프리모드
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
}
.container2 .item {
height: 160px;
}
.item3 {
flex: 4;
}
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content1 content2"
"sidebar content3 content3"
"footer footer footer";
}
.item {
width: auto;
}
.item1 {
grid-area: header;
}
.item2 {
grid-area: sidebar;
height: auto;
}
.item3 {
grid-area: content1;
}
.item4 {
grid-area: content2;
}
.item5 {
grid-area: content3;
}
.item6 {
grid-area: footer;
}