CSS 그리드를 사용한 레이아웃 템플릿 입니다.
디자인 및 페이지 레이아웃 코딩시 유용하게 사용할수 있는 팁입니다.
CSS Grid와 최소한의 DOM을 사용하여 필수적인 레이아웃 템플릿 설정을 살펴보고 간단하게 페이지 레이아웃을 잡을수 있습니다
<span>
<b>1</b>
<b>2</b>
</span>
<span class="template-2col">
<b>1</b>
<b>2</b>
</span>
<span class="template-3col">
<b>1</b>
<b>2</b>
<b>3</b>
</span>
<span class="template-4up">
<b>1</b>
<b>2</b>
<b>3</b>
<b>4</b>
</span>
<span class="template-sidebar--left">
<b>1</b>
<b>2</b>
<b>3</b>
</span>
<span class="template-sidebar--right">
<b>1</b>
<b>2</b>
<b>3</b>
</span>
// For more reasons to love grid, check out my article:
// @link https://moderncss.dev/3-css-grid-techniques-to-make-you-a-grid-convert/
// Or my additional articles that cover grid:
// @link https://moderncss.dev/topics/#grid
* {
box-sizing: border-box;
}
span {
background: #fff;
padding: 1rem;
border-radius: 7px;
box-shadow: 0 2px 6px -2px rgba(black, 0.42);
height: 30vh;
display: grid;
grid-gap: 0.5rem;
b {
background-color: #7B86F5;
border-radius: 4px;
display: grid;
place-items: center;
color: #fff;
font-size: 1.5rem;
}
&.template {
// Using `repeat()` lets us explicitly define
// the number of rows or columns to allow
&-2col {
grid-template-columns: repeat(2, 1fr);
}
&-3col {
grid-template-columns: repeat(3, 1fr);
}
// NOTE: The 2col will also create this arrangement,
// this is just more explicit
&-4up {
// grid-template-rows / grid-template-columns
grid-template: repeat(2, 1fr) / repeat(2, 1fr);
}
&-sidebar--left {
grid-template: "sidebar mainA"
"sidebar mainB";
> :nth-child(1) {
grid-area: sidebar;
}
}
&-sidebar--right {
grid-template: "mainA sidebar"
"mainB sidebar";
> :nth-child(3) {
grid-area: sidebar;
}
}
}
}
body {
background: #f9f9f9;
min-height: 100vh;
display: grid;
grid-template-columns: repeat(auto-fit, 30ch);
place-content: center;
grid-gap: 5vh;
max-width: calc((30ch * 3) + (5vh * 2) + 2rem);
margin-left: auto;
margin-right: auto;
padding: 1rem;
}
