CSS Gridで、Webページでよく使うレイアウトを実装したシンプルなHTML/CSSのテンプレートのまとめ

Post on:2017年11月27日

CSS Gridで実装するヘッダ・フッタ・3カラム（聖杯レイアウト）

左右のサイドバーとコンテンツの3カラムをヘッダとフッタで挟んだ3カラムのレイアウトです。聖杯のようなので、Holy Grail Layout（聖杯レイアウト）と呼ばれています。

コンテンツ可変型

ビューポートが小さくなるにつれ、コンテンツの幅が変化するようにCSS Gridで実装します。ビューポートの幅がある程度ないと成立しないため、スマホ対応には次の「コンテナ積み重ね型」が適しています。

<div class="grid">
  <header>
    ヘッダ
  </header>

  <aside class="sidebar-left">
    左サイドバー
  </aside>

  <article>
    記事
  </article>

  <aside class="sidebar-right">
    右サイドバー
  </aside>
  
  <footer>
    フッタ
  </footer>
</div>

ヘッダ

</header>

左サイドバー

</aside>

記事

</article>

右サイドバー

</aside>

フッタ

</footer>

</div>

.grid {
  display: grid;
  grid-template-columns: 150px auto 150px;
  grid-template-rows: repeat(3, 100px);
  grid-gap: 1em;
}

header,
aside,
article,
footer {
  background: #eaeaea;
  padding: 1em;
}

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

/* Demo Specific Styles */
body {
  margin: 0 auto;
  max-width: 56em;
  padding: 1em 0;
}

.grid > * {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid {

display: grid;

grid-template-columns: 150px auto 150px;

grid-template-rows: repeat(3, 100px);

grid-gap: 1em;

}

header,

aside,

article,

footer {

background: #eaeaea;

padding: 1em;

}

header, footer {

grid-column: 1 / 4;

}

/* Demo Specific Styles */

body {

margin: 0 auto;

max-width: 56em;

padding: 1em 0;

}

.grid > * {

display: flex;

align-items: center;

justify-content: center;

}

コンテナ積み重ね型

ビューポートが小さくなるにつれ、各コンテナが積み重なるようにCSS Gridで実装します。スマホにも対応するのであれば、こちらのレイアウトの方が適しています。

CSS Grid: Holy Grail Layout - Responsive

<div class="grid">
  <header>
    ヘッダ
  </header>

  <aside class="sidebar-left">
    左サイドバー
  </aside>

  <article>
    記事
  </article>

  <aside class="sidebar-right">
    右サイドバー
  </aside>
  
  <footer>
    フッタ
  </footer>
</div>

ヘッダ

</header>

左サイドバー

</aside>

記事

</article>

右サイドバー

</aside>

フッタ

</footer>

</div>

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

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

@media all and (max-width: 700px) {
  aside,
  article {
    grid-column: 1 / 4;
  }
}

/* Demo Specific Styles */
body {
  margin: 0 auto;
  max-width: 56em;
  padding: 1em 0;
}

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

.grid {

display: grid;

grid-template-columns: 150px auto 150px;

grid-gap: 1em;

}

header, footer {

grid-column: 1 / 4;

}

@media all and (max-width: 700px) {

aside,

article {

grid-column: 1 / 4;

}

/* Demo Specific Styles */

body {

margin: 0 auto;

max-width: 56em;

padding: 1em 0;

}

header,

aside,

article,

footer {

background: #eaeaea;

display: flex;

align-items: center;

justify-content: center;

height: 25vh;

}

CSS Gridで実装するヘッダ・フッタ・2カラム

サイドバーとコンテンツの2カラムをヘッダとフッタで挟んだブログでよく見かけるレイアウトです。

Flexible型

ビューポートが小さくなっても、レイアウトの構造は変化せず、各コンテナが小さくなるようにCSS Gridで実装します。ビューポートの幅がある程度ないと成立しないため、スマホ対応には次の「Responsive型」が適しています。

CSS Grid: Header, Footer with 2-Column (Flexible)

<header>
  ヘッダ
</header>
<main>
  メイン
</main>
<aside>
  サイドバー
</aside>
<footer>
  フッタ
</footer>

ヘッダ

</header>

<main>

メイン

</main>

<aside>

サイドバー

</aside>

フッタ

</footer>

body {
  display: grid;
  grid-template-columns: 75% 25%;
  grid-template-rows: 10vw 30vw 10vw;
  grid-gap: 1em;
}

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

/* Demo Specific Styles */
body {
  margin: 0 auto;
  max-width: 56em;
  padding: 1em 0;
}

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

body {

display: grid;

grid-template-columns: 75% 25%;

grid-template-rows: 10vw 30vw 10vw;

grid-gap: 1em;

}

header,

footer {

grid-column: 1 / span 2;

}

/* Demo Specific Styles */

body {

margin: 0 auto;

max-width: 56em;

padding: 1em 0;

}

header,

main,

aside,

footer {

background: #eaeaea;

display: flex;

align-items: center;

justify-content: center;

}

Responsive型

ビューポートが小さくなるにつれ、各コンテナが積み重なるレイアウトをCSS Gridで実装します。スマホにも対応するのであれば、こちらのレイアウトの方が適しています。

CSS Grid: Header, Footer with 2-Column (Responsive)

<header>
  ヘッダ
</header>
<main>
  メイン
</main>
<aside>
  サイドバー
</aside>
<footer>
  フッタ
</footer>

ヘッダ

</header>

<main>

メイン

</main>

<aside>

サイドバー

</aside>

フッタ

</footer>

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

main {
  grid-column: 1 / span 3;
}

aside {
  grid-column: span 2;
}

@media (max-width: 700px) {
  
  main,
  aside {
    grid-column: 1 / span 5;
  }
  
}

/* Demo Specific Styles */
body {
  margin: 0 auto;
  max-width: 56em;
  padding: 1em 0;
}

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

header,
footer {
  height: 10vw;;
}

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;

}

main {

grid-column: 1 / span 3;

}

aside {

grid-column: span 2;

}

@media (max-width: 700px) {

main,

aside {

grid-column: 1 / span 5;

}

/* Demo Specific Styles */

body {

margin: 0 auto;

max-width: 56em;

padding: 1em 0;

}

header,

main,

aside,

footer {

background: #eaeaea;

display: flex;

align-items: center;

justify-content: center;

}

header,

footer {

height: 10vw;;

}

CSS Gridで実装するカード型レイアウト

各コンテナがグリッドに沿って配置されるレイアウトをCSS Gridで実装します。カードを成り行きで配置したい時に便利なレイアウトです。

CSS Grid Evenly Distributed, As Many As Needed

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

</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 {
  /* Demo-Specific Styles */
  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;
  }
}

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 {

/* Demo-Specific Styles */

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;

}

CSS Gridで実装する要素がグリッドからはみ出したレイアウト

テキストの両端にはマージンがあり、テキストの間に配置された画像は全幅で表示、のように要素がグリッドからはみ出したレイアウトをCSS Gridで実装します。
実装の仕組みは、Breaking out with CSS Grid explainedをチェックしてみてください。

CSS Grid: Article with Breakout

<article>
  <section>
    <h1>記事タイトル</h1>
    <p>パラグラフ</p>
    <p>パラグラフ</p>
  </section>
  <figure>
    <img src="image.jpg">
  </figure>
  <section>
    <p>パラグラフ</p>
    <p>パラグラフ</p>
    <p>パラグラフ</p>
    <p>パラグラフ</p>
  </section>
</article>

<h1>記事タイトル</h1>

<p>パラグラフ</p>

</section>

</figure>

<p>パラグラフ</p>

</section>

</article>

article {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 
    [full-start] minmax(1em, 1fr) 
    [main-start] minmax(0, 56em) [main-end]
    minmax(1em, 1fr) [full-end];
      grid-template-columns: 
    [full-start] minmax(1em, 1fr) 
    [main-start] minmax(0, 56em) [main-end]
    minmax(1em, 1fr) [full-end];
  grid-gap: 1em;
}

section {
  -ms-grid-column: main;
      grid-column: main;
}

figure {
  -ms-grid-column: full;
      grid-column: full;
}

/* Demo Specific Styles */
body {
  padding: 2em 0;
}

article > * {
  background-color: #eaeaea;
  padding: 2em;
}

fogure {
  text-align: center;
}

img {
  max-width: 100%;
}

article {

display: -ms-grid;

display: grid;

-ms-grid-columns:

[full-start] minmax(1em, 1fr)

[main-start] minmax(0, 56em) [main-end]

minmax(1em, 1fr) [full-end];

grid-template-columns:

[full-start] minmax(1em, 1fr)

[main-start] minmax(0, 56em) [main-end]

minmax(1em, 1fr) [full-end];

grid-gap: 1em;

}

section {

-ms-grid-column: main;

grid-column: main;

}

figure {

-ms-grid-column: full;

grid-column: full;

}

/* Demo Specific Styles */

body {

padding: 2em 0;

}

article > * {

background-color: #eaeaea;

padding: 2em;

}

fogure {

text-align: center;

}

img {

max-width: 100%;

}

CSS Gridで実装するカレンダー型レイアウト

CSS Gridはカレンダーのようなグリッドにも適しています。

CSS Grid: Calendar

<div class="calendar">
  <header>
    <h1>November 2017</h1>
  </header>

  <ul class="weekdays">
    <li>
      <abbr title="S">Sunday</abbr>
    </li>
    <li>
      <abbr title="M">Monday</abbr>
    </li>
    <li>
      <abbr title="T">Tuesday</abbr>
    </li>
    <li>
      <abbr title="W">Wednesday</abbr>
    </li>
    <li>
      <abbr title="T">Thursday</abbr>
    </li>
    <li>
      <abbr title="F">Friday</abbr>
    </li>
    <li>
      <abbr title="S">Saturday</abbr>
    </li>
  </ul>

  <ul class="day-grid">
    <li class="month=prev">29</li>
    <li class="month=prev">30</li>
    <li class="month=prev">31</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li class="month-next">1</li>
    <li class="month-next">2</li>
  </ul>
    
</div>

<h1>November 2017</h1>

</header>

<li>

<abbr title="S">Sunday</abbr>

</li>

<li>

<abbr title="M">Monday</abbr>

</li>

<li>

<abbr title="T">Tuesday</abbr>

</li>

<li>

<abbr title="W">Wednesday</abbr>

</li>

<li>

<abbr title="T">Thursday</abbr>

</li>

<li>

<abbr title="F">Friday</abbr>

</li>

<li>

<abbr title="S">Saturday</abbr>

</li>

</ul>

</ul>

</div>

header {
  display: flex;
  align-items: center;
  font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (1600 - 300)));
  justify-content: center;
  margin-bottom: 2em;
  background: #000;
  color: #fff;
  min-height: 10vh;
  text-align: center;
}

ul {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 1em;
  margin: 0 auto;
  max-width: 64em;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin-left: 0;
  font-size: calc(16px + (21 - 16) * ((100vw - 300px) / (1600 - 300)));
}

ul.weekdays {
  margin-bottom: 1em;
}

ul.weekdays li {
  height: 4vw;
}

ul.day-grid li {
  background-color: #eaeaea;
  border: 1px solid #eaeaea;
  height: 12vw;
  max-height: 125px;
}

ul.weekdays abbr[title] {
  border: none;
  font-weight: 800;
  text-decoration: none;
}

ul.day-grid li:nth-child(1),
ul.day-grid li:nth-child(2),
ul.day-grid li:nth-child(3),
ul.day-grid li:nth-child(34),
ul.day-grid li:nth-child(35) {
  background-color: #fff;
}

@media all and (max-width: 800px) {
  ul {
    grid-gap: .25em;
  }
  
  ul.weekdays li {
    font-size: 0;
  }
  
  ul.weekdays > li abbr:after {
      content: attr(title);
      font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (1600 - 300)));
    text-align: center;
    }
}

header {

display: flex;

align-items: center;

font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (1600 - 300)));

justify-content: center;

margin-bottom: 2em;

background: #000;

color: #fff;

min-height: 10vh;

text-align: center;

}

ul {

display: grid;

grid-template-columns: repeat(7, 1fr);

grid-gap: 1em;

margin: 0 auto;

max-width: 64em;

padding: 0;

}

li {

display: flex;

align-items: center;

justify-content: center;

list-style: none;

margin-left: 0;

font-size: calc(16px + (21 - 16) * ((100vw - 300px) / (1600 - 300)));

}

ul.weekdays {

margin-bottom: 1em;

}

ul.weekdays li {

height: 4vw;

}

ul.day-grid li {

background-color: #eaeaea;

border: 1px solid #eaeaea;

height: 12vw;

max-height: 125px;

}

ul.weekdays abbr[title] {

border: none;

font-weight: 800;

text-decoration: none;

}

ul.day-grid li:nth-child(1),

ul.day-grid li:nth-child(2),

ul.day-grid li:nth-child(3),

ul.day-grid li:nth-child(34),

ul.day-grid li:nth-child(35) {

background-color: #fff;

}

@media all and (max-width: 800px) {

ul {

grid-gap: .25em;

}

ul.weekdays li {

font-size: 0;

}

ul.weekdays > li abbr:after {

content: attr(title);

font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (1600 - 300)));

text-align: center;

}

CSS Gridで実装するモノポリー型レイアウト

従来の実装方法ではこういったレイアウトには不要なHTMLが必要でしたが、CSS GridではクリーンなHTMLで簡単に実装できます。

CSS Grid: Monopoly Board

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

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

/* Demo Specific Style */
.board {
  padding: 1em 0;
}

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

100

101

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

}

/* Demo Specific Style */

.board {

padding: 1em 0;

}

.square {

background: #eaeaea;

text-align: center;

display: flex;

align-items: center;

justify-content: center;

}

CSS Gridで、Webページでよく使うレイアウトを実装したシンプルなHTML/CSSのテンプレートのまとめ

CSS Gridで実装するヘッダ・フッタ・3カラム（聖杯レイアウト）

コンテンツ可変型

コンテナ積み重ね型

CSS Gridで実装するヘッダ・フッタ・2カラム

Flexible型

Responsive型

CSS Gridで実装するカード型レイアウト

CSS Gridで実装する要素がグリッドからはみ出したレイアウト

CSS Gridで実装するカレンダー型レイアウト

CSS Gridで実装するモノポリー型レイアウト

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Category

Blog Info

CSS Gridで、Webページでよく使うレイアウトを実装したシンプルなHTML/CSSのテンプレートのまとめ

CSS Gridで実装するヘッダ・フッタ・3カラム（聖杯レイアウト）

コンテンツ可変型

コンテナ積み重ね型

CSS Gridで実装するヘッダ・フッタ・2カラム

Flexible型

Responsive型

CSS Gridで実装するカード型レイアウト

CSS Gridで実装する要素がグリッドからはみ出したレイアウト

CSS Gridで実装するカレンダー型レイアウト

CSS Gridで実装するモノポリー型レイアウト

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info