web-dev-qa-db-ja.com

CSSグリッドのヘッダーを修正

CSSグリッドをいじり始めたばかりで、固定ヘッダーの作成方法について興味があります。行1がヘッダーで行2がコンテンツの別のグリッドである2行のグリッドを作成する必要がありますか？または、これにアプローチする簡単な方法はありますか？

スクロールを有効にするために、グリッド内のdivに高さを追加しました。

テスト用に設定したHTML/CSSは次のとおりです。

html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, Ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    /* DEFAULTS */

    body {
      color: white;
    }
    
    /* SETTING UP THE GRID LAYOUT */
    
    .wrapper {
      display: grid;
      grid-template-columns: repeat(12, [col-start] 1fr);
      grid-template-rows: 10vh 1fr;
    }
    
    .header {
      grid-column: col-start / span 12;
      background-color: black;
    }
    
    .jumbotron {
      grid-column: col-start / span 12;
      height: 30vh;
      background-color: yellow;
    }
    
    .content-one-left {
      grid-column: col-start / span 6;
      height: 30vh;
      background-color: red;
    }
    
    .content-one-right {
      grid-column: col-start 7 / span 6;
      height: 30vh;
      background-color: blue;
    }
    
    .content-two-left {
      grid-column: col-start / span 6;
      height: 30vh;
      background-color: blue;
    }
    
    .content-two-right {
      grid-column: col-start 7 / span 6;
      height: 30vh;
      background-color: red;
    }
    
    .footer {
      grid-column: col-start / span 12;
      height: 10vh;
      background-color: black;
    }
<div class="wrapper">

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

  <div class="jumbotron">
    <p> Jumbotron </p>
  </div>

  <div class="content-one-left">
    <p> Content 1 Left </p>
  </div>

  <div class="content-one-right">
    <p> Content 1 Right </p>
  </div>

  <div class="content-two-left">
    <p> Content 2 Left </p>
  </div>

  <div class="content-two-right">
    <p> Content 2 Right </p>
  </div>

  <div class="footer">
    <p> Footer </p>
  </div>

</div>
htmlcsscss-positioncss-grid
5
markeesmith

グリッドコンテナの子をposition: fixedに設定すると、ドキュメントフローから削除され、グリッドレイアウトに参加しなくなります（ セクション9.2を参照グリッド仕様 ）。

したがって、ビューポートに固定したい場合は、グリッドコンテナから要素を削除するのが理にかなっています。ヘッダーの場合は、グリッドコンテナーの上に配置します。

それでもヘッダーを問題にならないグリッドにしたい場合。固定要素はグリッドコンテナにすることができます。グリッドアイテムとしてはうまく機能しません。

codepen demo

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
Ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* DEFAULTS */

body {
  color: white;
}


/* SETTING UP THE GRID LAYOUT */

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-template-rows: 1fr;
  height: 90vh;
  overflow: auto;
}

.header {
  height: 10vh;
  background-color: black;
}

.jumbotron {
  grid-column: col-start / span 12;
  height: 30vh;
  background-color: yellow;
}

.content-one-left {
  grid-column: col-start / span 6;
  height: 30vh;
  background-color: red;
}

.content-one-right {
  grid-column: col-start 7 / span 6;
  height: 30vh;
  background-color: blue;
}

.content-two-left {
  grid-column: col-start / span 6;
  height: 30vh;
  background-color: blue;
}

.content-two-right {
  grid-column: col-start 7 / span 6;
  height: 30vh;
  background-color: red;
}

.footer {
  grid-column: col-start / span 12;
  height: 10vh;
  background-color: black;
}
<div class="header">
  <p> Header </p>
</div>

<div class="wrapper">



  <div class="jumbotron">
    <p> Jumbotron </p>
  </div>

  <div class="content-one-left">
    <p> Content 1 Left </p>
  </div>

  <div class="content-one-right">
    <p> Content 1 Right </p>
  </div>

  <div class="content-two-left">
    <p> Content 2 Left </p>
  </div>

  <div class="content-two-right">
    <p> Content 2 Right </p>
  </div>

  <div class="footer">
    <p> Footer </p>
  </div>

</div>
4
Michael_B

2018年には、position: sticky

header {
  position: sticky;
  top: 0;
}

これはJSFiddleです デモしています。

ブラウザサポート -header要素に対して機能します（ChromeおよびEdgeでテスト済み）。

16
binaryfunt
.header{
    position: fixed;
    left:0;
    right:0;
    top:0;
}

ヘッダーの固定位置を使用すると、確実に機能します。

1
Ravi Kumar Gopalakrishnan

.wrapper {margin-top; 80px; position:relative;}および.header {position:fixed; height: 80px; z-index: 10;}を使用すると、.wrapper内のグリッド定義が固定ヘッダーの下に流れます。適切に測定するには、.headerのルールセットを.wrapperの前の上部に配置します。

/* Globals */

body {
  color: white;
}


/* Grid Layout - Not necessarily display:inline-grid; */

.header {
  top: 0px;
  height: 80px;
  background-color: black;
  position: fixed;
  left: 2vw;
  right: 2vw;
  z-index: 10;
  overflow: hidden;
  }

.wrapper {
  position: relative;
  left: 10vw;
  width: 80vw;
  top: 20px;
  margin-top: 80px;
  display: -ms-inline-grid;
  display: -moz-inline-grid;
  display: inline-grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
  grid-template-rows: 1fr; 
  overflow: auto;
}

.jumbotron {
  grid-column: col-start / span 12;
  height: 30vh;
  background-color: yellow;
}

.content-one-left {
  grid-column: col-start / span 6;
  height: 30vh;
  background-color: red;
}

.content-one-right {
  grid-column: col-start 7 / span 6;
  height: 30vh;
  background-color: blue;
}

.content-two-left {
  grid-column: col-start / span 6;
  height: 30vh;
  background-color: blue;
}

.content-two-right {
  grid-column: col-start 7 / span 6;
  height: 30vh;
  background-color: red;
}

.footer {
  grid-column: col-start / span 12;
  height: 10vh;
  background-color: black;
}
<div class="header">
  <p> Header </p>
</div>

<div class="wrapper">



  <div class="jumbotron">
    <p> Jumbotron </p>
  </div>

  <div class="content-one-left">
    <p> Content 1 Left </p>
  </div>

  <div class="content-one-right">
    <p> Content 1 Right </p>
  </div>

  <div class="content-two-left">
    <p> Content 2 Left </p>
  </div>

  <div class="content-two-right">
    <p> Content 2 Right </p>
  </div>

  <div class="footer">
    <p> Footer </p>
  </div>

</div>
0
Tim Pozza