기본적으로 사용하는 레이아웃 모음

Study/Html_Css

기본적으로 사용하는 레이아웃 모음

AneOK 2019. 10. 28. 18:07

에전에 css-tricks 사이트에서 보고 만들어 둔 것을 이번에 블로그에 업데이트합니다. 총 4개의 파일로 나름 몇 번을 수정해서 제 스타일로 만들어 둔 것입니다.

1. 2단 반응형 레이아웃

<header>
  Header
</header>
<main>
  Main
</main>
<aside>
  Sidebar
</aside>
<footer>
  Footer
</footer>

body {
  margin: 0 auto;
  max-width: 56em;  /* 896px = 56em * 16 */
  padding: 1em 0;
}


body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 10vw 30vw 10vw;
  grid-gap: 1em;
}

header,
footer {
  grid-column: 1 / span 5;
}

header,
main,
aside,
footer {
  background: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
}

header,
footer {
  height: 10vw;;
}

main,
aside {
  grid-column: 1 / span 5;
}

@media all and (min-width: 896px) { /* screen > 896px - 데스크탑에서 사용될 스타일을 여기에 작성합니다. */
 main {
  grid-column: 1 / span 3;
 }
 aside {
  grid-column: span 2;
 }
}

2. 3단 반응형 레이아웃

<div class="grid">
  <header>
    Header
  </header>

  <aside class="sidebar-left">
    Left Sidebar
  </aside>

  <article>
    Article
  </article>

  <aside class="sidebar-right">
    Right Sidebar
  </aside>
  
  <footer>
    Footer
  </footer>
</div>

body {
  margin: 0 auto;
  max-width: 56em;   /* 896px = 56em * 16 */
  padding: 1em 0;
}

.grid {
  display: grid;
  grid-template-columns: 150px auto 150px;
  grid-gap: 1em;
}

header, aside, article,	footer {
  background: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 15vh;
}

header, footer, aside,	article {
  grid-column: 1 / 4;
}

@media all and (min-width: 896px) {/* screen > 896px - 데스크탑에서 사용될 스타일을 여기에 작성합니다. */
 aside,	article {
  grid-column: auto;
 }
}

3. 균일 레이아웃

<div class="grid">  
  <div class="module">1</div>
  <div class="module">2</div>
  <div class="module">3</div>
  <div class="module">4</div>
  <div class="module">5</div>
  <div class="module">6</div>
  <div class="module">7</div>
  <div class="module">8</div>
  <div class="module">9</div>
  <div class="module">10</div>
  <div class="module">11</div>
  <div class="module">12</div>
  <div class="module">13</div>
  <div class="module">14</div>
  <div class="module">15</div>
</div>

body {
  margin: 0 auto;
  max-width: 56em;
  padding: 1em 0;
}

.grid {
  /* Grid Fallback */
  display: flex;
  flex-wrap: wrap;
  
  /* Supports Grid */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(150px, auto);
  grid-gap: 1em;
}

.module {
  /* 데모 특정 스타일 II */
  background: #eaeaea;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  
  /* Flex Fallback */
  margin-left: 5px;
  margin-right: 5px;
  flex: 1 1 200px;
}

/* If Grid is supported, remove the margin we set for the fallback */
@supports (display: grid) {
  .module {
    margin: 0;
  }
}

4. 게임 보드 레이아웃

<div class="board">
  <div class="square">1</div>
  <div class="square">2</div>
  <div class="square">3</div>
  <div class="square">4</div>
  <div class="square">5</div>
  <div class="square">6</div>
  <div class="square">7</div>
  <div class="square">8</div>
  <div class="square">9</div>
  <div class="square">10</div>
  <div class="square">11</div>
  <div class="square">12</div>
  <div class="square">13</div>
  <div class="square">14</div>
  <div class="square">15</div>
  <div class="square">16</div>
</div>

.board {
  display: grid;
  justify-content: center;
  align-content: center;
  grid-gap: 1rem;
  grid-template-columns: repeat(5, 10vw);
  grid-template-rows: repeat(5, 10vw);
}

.square:nth-child(1) {
  grid-row: 1;
  grid-column: 1;
}

.square:nth-child(2) {
  grid-row: 1;
  grid-column: 2;
}

.square:nth-child(3) {
  grid-row: 1;
  grid-column: 3;
}

.square:nth-child(4) {
  grid-row: 1;
  grid-column: 4;
}

.square:nth-child(5) {
  grid-row: 1;
  grid-column: 5;
}

.square:nth-child(6) {
  grid-row: 2;
  grid-column: 5;
}

.square:nth-child(7) {
  grid-row: 3;
  grid-column: 5;
}

.square:nth-child(8) {
  grid-row: 4;
  grid-column: 5;
}

.square:nth-child(9) {
  grid-row: 5;
  grid-column: 5;
}

.square:nth-child(10) {
  grid-row: 5;
  grid-column: 4;
}

.square:nth-child(11) {
  grid-row: 5;
  grid-column: 3;
}

.square:nth-child(12) {
  grid-row: 5;
  grid-column: 2;
}

.square:nth-child(13) {
  grid-row: 5;
  grid-column: 1;
}

.square:nth-child(14) {
  grid-row: 4;
  grid-column: 1;
}

.square:nth-child(15) {
    grid-row: 3;
    grid-column: 1;
  }

.square:nth-child(16) {
    grid-row: 2;
    grid-column: 1;
  }

/* 데모 특정 스타일 */
.board {
  padding: 1em 0;
}

.square {
  background: #eaeaea;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

출처 : https://css-tricks.com/snippets/css/css-grid-starter-layouts/#grid-holy-grail

저작자표시