flex, grid 코드 에디터
.container { display: flex; } .item1 { flex: 1; } .item2 { flex: 2;
} .item3 { flex: 1; } .item4 { flex: 1; } .item5 { flex: 2; } .item7
{ flex: 1; }
.container { display: flex; } .container1 { justify-content:
space-between; } .item1 { flex: 1; } .item2 { flex: 3; } .item3 {
flex: 1; } .item4 { flex: 0; } .item5 { flex: 1; } .item6 { flex: 1;
} .item7 { flex: 2; } .item8 { flex: 1; }
.container { display: flex; } .container3 { justify-content:
space-between; flex-direction: row-reverse; } .item1 { flex: 1; }
.item2 { flex: 0; } .item3 { flex: 1; } .item4 { flex: 3; } .item5 {
flex-basis: 30%; } .item6 { flex-basis: 40%; } .item7 { flex: 1; }
.item8 { }
.container { gap: 0; }
.container { display: grid; grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(4, 1fr); row-gap: 16px; } .item1 {
grid-area: 1 / 3 / 2 / 8; } .item2 { grid-area: 1 / 9 / 2 / 11; }
.item3 { grid-area: 2 / 1 / 3 / 5; } .item4 { grid-area: 2 / 6 / 3 /
11; } .item5 { grid-area: 3 / 1 / 4 / 5; } .item6 { grid-area: 3 / 7
/ 4 / 11; } .item7 { grid-area: 4 / 3 / 5 / 8; } .item8 { grid-area:
4 / 9 / 5 / 11; }
.container { display: grid; grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(4, 1fr); row-gap: 16px; } .item1 {
grid-area: 1 / 1 / 2 / 6; } .item2 { grid-area: 1 / 7 / 2 / 11; }
.item3 { grid-area: 2 / 3 / 3 / 7; } .item4 { grid-area: 2 / 8 / 3 /
11; } .item5 { grid-area: 3 / 1 / 4 / 5; } .item6 { grid-area: 3 / 6
/ 4 / 11; } .item7 { grid-area: 4 / 1 / 5 / 4; } .item8 { grid-area:
4 / 5 / 5 / 11; }
.container { display: grid; grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(4, 1fr); row-gap: 16px; } .item1 {
grid-area: 1 / 1 / 2 / 5; } .item2 { grid-area: 1 / 6 / 2 / 11; }
.item3 { grid-area: 2 / 3 / 3 / 5; } .item4 { grid-area: 2 / 7 / 3 /
11; } .item5 { grid-area: 3 / 1 / 4 / 4; } .item6 { grid-area: 3 / 5
/ 4 / 10; } .item7 { grid-area: 4 / 1 / 5 / 6; } .item8 { grid-area:
4 / 8 / 5 / 11; }