[해피CGI][cgimall] CSS 그리드를 사용한 레이아웃 템플릿

CSS 그리드를 사용한 레이아웃 템플릿 입니다.
디자인 및 페이지 레이아웃 코딩시 유용하게 사용할수 있는 팁입니다.

CSS Grid와 최소한의 DOM을 사용하여 필수적인 레이아웃 템플릿 설정을 살펴보고 간단하게 페이지 레이아웃을 잡을수 있습니다

HTML 구조

<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>

CSS 소스

// 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;

}