SMALL
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 50px;
}
.spacer {
height: 50px;
background-color: #ccc;
}
.wrap1 {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
grid-template-rows: 100px 300px 50px;
}
.wrap1 header {
background-color: #fc0;
grid-column-start: 1;
grid-column-end: 4;
}
.wrap1 aside {
background-color: aqua;
}
.wrap1 main {
background-color: yellowgreen;
grid-column-start: 2;
grid-column-end: -1;
}
.wrap1 footer {
background-color: tomato;
grid-column-start: 1;
grid-column-end: -1;
}
.wrap2 {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
grid-template-rows: 100px 200px 150px 50px;
}
.wrap2 header {
background-color: #aaa;
grid-column: 1 / 3;
}
.wrap2 aside {
background-color: #888;
grid-column: 3 / -1;
grid-row: 1 / -1;
}
.wrap2 main {
background-color: #666;
grid-column: 1 / 3;
grid-row: 2 / 4;
}
.wrap2 footer {
background-color: #444;
grid-column: 1/3;
}
</style>
</head>
<body>
<div class="wrap wrap1">
<header>Header</header>
<aside>Aside</aside>
<main>Main</main>
<footer>Footer</footer>
</div>
<div class="spacer"></div>
<div class="wrap wrap2">
<header>Header</header>
<aside>Aside</aside>
<main>Main</main>
<footer>Footer</footer>
</div>
<div class="spacer"></div>
</body>
</html>
LIST
'프론트엔드 개발자 > CSS' 카테고리의 다른 글
| GRID 끝판왕 클론코딩으로 완벽 파헤치기 , GRID 완벽 분석하기 grid를 사용해보자 (3) (0) | 2023.04.18 |
|---|---|
| GRID 완벽 분석하기 grid를 사용해보자 (1) (0) | 2023.04.18 |
| flex-item 속성 flex-grow, flex-shrink , flex-basis 사용하기 (0) | 2023.04.10 |
| CSS 애니메이션 효과 _ 카드박스 효과내기(2) (0) | 2023.04.07 |
| CSS 애니메이션 효과 _ 카드박스 효과내기(1) (0) | 2023.04.07 |
댓글