menu
menu

キーワード検索

 

前月(8月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【jQuery】jQueryでドロップダウンメニュー
  3. ( 5 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
  4. ( 3 ↓) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  5. ( 4 ↓) 【CSS】レスポンシブデザインのブレークポイントは⁉
  6. ( 6 - ) 【CSS】スマホサイト向け横にスクロールするナビゲーション
  7. ( 8 ↑) 【PHP】PHPでシンプルなメールフォーム
  8. ( 9 ↑) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  9. ( - ↑) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  10. ( - ↑) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
このエントリーをはてなブックマークに追加

【CSS】CSSのGridでスマホサイト対応レイアウト

【CSS】CSSのGridでスマホサイト対応レイアウト

こんにちは(・∀・)

今日はdisplayプロパティの値「grid」を使ってスマホサイトにも対応したレイアウトのサンプルをご紹介します。

サンプルデモ

Result
スマホでのご確認はこちらをどうぞ
QRコード

サンプルは全部で3パターンです。詳細はサンプルページをご覧ください。

HTML

<!--❶ smp1-->
<div class="grid-container smp-1">
<div class="grid-item">grid-item-1</div>
<div class="grid-item">grid-item-2</div>
<!--grid-container smp-1--></div>

<!--❷ smp2-->
<div class="grid-container smp-2">
<div class="grid-item">grid-item-1</div>
<div class="grid-item">grid-item-2</div>
<!--grid-container smp-2--></div>

<!--❸ smp3-->
<div class="grid-container smp-3">
<div class="grid-item">grid-item-1</div>
<div class="grid-item">grid-item-2</div>
<div class="grid-item">grid-item-3</div>
<!--grid-container smp-3--></div>
CSS

.grid-container {
  display: grid;
  grid-gap: 10px;
}
.smp-1,
.smp-2,
.smp-3 {
  grid-template-columns: 1fr;
}
.smp-3 .grid-item:nth-child(1) {
  order: 3;
}
.smp-3 .grid-item:nth-child(2) {
  order: 1;
}
.smp-3 .grid-item:nth-child(3) {
  order: 2;
}
@media(min-width : 600px){
.smp-1 {
  grid-template-columns: 1fr 2fr;
}
.smp-2 {
  grid-template-columns: 300px 1fr;
}
.smp-3 {
  grid-template-columns: 200px 1fr 300px;
}
.smp-3 .grid-item:nth-child(1) {
  order: 1;
}
.smp-3 .grid-item:nth-child(2) {
  order: 2;
}
.smp-3 .grid-item:nth-child(3) {
  order: 3;
}
}
.grid-container .grid-item {
  padding: 10px;
}
.grid-container .grid-item:nth-child(odd) {
  background: lightblue;
}
.grid-container .grid-item:nth-child(even) {
  background: pink;
}

親要素のgrid-containerにdisplay:gridを指定してレイアウトしています。

grid-itemとgrid-itemの間のスペースは親要素のgrid-containerにgrid-gap:10pxを指定して10pxのマージンを取っています。

grid-itemの横幅はgrid-template-columnsプロパティで指定しています。

grid-template-columnsプロパティの値には単位「fr」を使用して比率で横幅の設定をすることができます。

例:grid-template-columns: 1fr 2fr 1.5fr;
この場合、1:2:1.5
という感じです。
または、 grid-template-columns: 200px 1fr;
という感じで固定値と組み合わせることもできます。


レイアウトと言えばFlexboxだと思いますが、Gridを使ってレイアウトする方が個人的には好きかもです。

よろしければお試しください。

  • CSS Grid グリッドレイアウト レスポンシブデザイン
このエントリーをはてなブックマークに追加