6

CSS グリッドは初めてで、このレイアウトでページを作成しようとしています:

ここに画像の説明を入力

私が抱えている問題は.main、コンテナー グリッド内のクラスとグリッドです。

のグリッドの設定が間違っていると思います.main。

上部のコンテナ.containerでは、3 列のレイアウトが機能していることがわかります。

ここに画像の説明を入力

最初の行では、div 画像 div が 3 列のうち 2 列にまたがり、blogart div が 1 列を占めるようにします。

2 行目には、それぞれ 1 列にまたがる 3 つの blogart div が必要です。

しかし、内側のグリッド.mainでは、すべてのマークアップが 4 番目の列にあります。

ここに画像の説明を入力

コードペンをセットアップしました。どんな提案にも最適です。

これは私のマークアップです。css は codepen にあります。

body {
  padding-top: 20px;
  background: #f5f7f8;
}

.container{
  display: grid;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 80px 180px 80px;
  grid-gap: 20px;
  
  grid-template-areas: "header   header   header"
                       "main     main     main"
                       "footer   footer   footer";
}

.container div{
  color: white;
  font-size: 20px;
  padding: 20px;
}

.header {
  background: #b03532;
  grid-area: header;
}

.main {
  background: #33a8a5;
  grid-area: main;
  
  display: grid;
  
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 20px;
  
  grid-template-areas: "bigimg bigimg blogart"
                       "blogart blogart blogart";
  
}

.bigimg {
  background: #da6f2b;
  grid-area: bigimg;
}

.blogart {
  background: #3d8bb1;
  grid-area: blogart;
}

.footer {
  background: #6a478f;
  grid-area: footer;
}
<section class="container">
  <div class="header">Header</div>

  <div class="main">
    <div class="bigimg">img</div>
    <div class="blogart">blogart</div>
    <div class="blogart">blogart</div>
    <div class="blogart">blogart</div>
    <div class="blogart">blogart</div>
  </div>

  <div class="footer">footer</div>
</section>

-ありがとう

4

2 に答える 2

6

複数のグリッド領域に「blogart」という名前を付けようとしていますが、これは無効です。複数のグリッド領域に同じ名前を付けることはできません。

名前付きテンプレート領域を使用する以外にも、グリッドを定義する方法はいくつかあります。内側のグリッドで使用する代わりにgrid-template-areas、グリッドの自動配置アルゴリズムを使用することをお勧めします。

次のようなことを試してください：

.main {
  background: #33a8a5;
  grid-area: main;

  display: grid;

  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 20px;
}

次に、グリッド内の各グリッド アイテムが、すべて配置されるまで、グリッド セルごとに 1 つずつ、3 つの列に対して自動的にレイアウトされます。

編集

より完全なデモは次のとおりです: https://codepen.io/keithjgrant/pen/JNGNKX

私はいくつかの変更を加えました：

  • grid-template-rows外側のグリッドからを削除しました。各行の高さを制限しました。必要に応じてコンテンツを自動的に拡大/縮小できるようにすることをお勧めします。
  • grid-template-areas内側のグリッドからを削除し、grid-areaそのグリッド アイテムから を削除しました。これにより、表示される順序で自然にレイアウトできます。各グリッド アイテムは、デフォルトで 1 つのグリッド セルを埋めます。
  • grid-column: span 22 列にまたがるようにするため、img にa を追加しました。

それで遊んでください。「blogart」要素をいくつでも追加 (または削除) できるようになりましたが、レイアウトは引き続き機能します。

于 2017-04-18T15:06:12.440 に答える