오늘도 역시 MDN 문서를 복습하며 grid를 정리해보았다.
매번 bootstrap이나 vuetify에서 받아쓰던걸 직접 해보니까 정리가 잘 된다.
https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Grids
기반이 되는 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Grid - line-based placement starting point</title>
<style>
body {
width: 90%;
max-width: 900px;
margin: 2em auto;
font: .9em/1.2 Arial, Helvetica, sans-serif;
}
.container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-gap: 20px;
}
header,
footer {
border-radius: 5px;
padding: 10px;
background-color: rgb(207,232,220);
border: 2px solid rgb(79,185,227);
}
aside {
border-right: 1px solid #999;
}
</style>
</head>
<body>
<div class="container">
<header>This is my lovely blog</header>
<article>
<h1>My article</h1>
<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</article>
<aside><h2>Other things</h2>
<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p></aside>
<footer>Contact me@mysite.com</footer>
</div>
</body>
</html>기초가 되는 코드이다.
아래와 같은 모습으로 나타난다.
아직은 header와 body, footer가 구분되어있지 않은 모습으로 보인다.
Line-based placement
header {
grid-column: 1 / 3;
grid-row: 1;
}
article {
grid-column: 2;
grid-row: 2;
}
aside {
grid-column: 1;
grid-row: 2;
}
footer {
grid-column: 1 / 3;
grid-row: 3;
}이렇게 넣어주게 된다면
정리가 쫙 된다.
각 그리드 설정 값들은 시작값 / 끝 값이다
그리드는 페이지를 1~4까지로 나누고 있기 때문에 어느정도의 공간을 차지할 것인지 값을 정해주면 된다.
article {
grid-column: 2;
grid-row: 2;
}
aside {
grid-column: 1;
grid-row: 2;
}를 보면
두 요소 모두 2열에 위치하지만
aside는 2열에서 1번째 공간을 차지하고 있으며
article은 2열에서 2번째 공간을 차지하고있다.
grid-template-areas
더욱 간편하게는
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
grid-template-columns: 1fr 3fr;
grid-gap: 20px;
}
header {
grid-area: header;
}
article {
grid-area: content;
}
aside {
grid-area: sidebar;
}
footer {
grid-area: footer;
}이렇게 표현해줘도 똑같은 효과를 얻을 수 있다.
grid-template-areas를 통해서 요소들을 텍스트로 어느곳에 배치할지 정할 수 있다.
성장스택 쌓고있는 개발자🏋