web-dev-qa-db-ja.com

cssグリッドレイアウトの水平スクロール

ダッシュボードのレイアウトを変える必要があります。アイテムが表示されているビューポートに収まるように超えている場合は、layout-containerに水平スクロールのみが必要です。次の要件のあるレイアウトに出くわしました。

This is the layout I required

CSS-flexboxを使用してレイアウトスタイルを作成しましたが、水平スクロールを取得できず、垂直スクロールのみを取得しました。

html,
body {
  height: 100%;
  margin: 0px;
}
* {
  box-sizing: border-box;
}
.flexbox {
  height: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow-x: auto;
  background-color: lightgreen;
}
.item {
  min-width: 50%;
  min-height: 50%;
  flex: 1 0 0;
  border: 1px solid;
}
.item:nth-child(odd) {
  background-color: lightblue;
}

.item:nth-child(even) {
  background-color: lightslategray;
}
.item1 {
  min-width: 100%;
}
<div class="flexbox">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item1">4</div>
  <div class="item item2">5</div>
  <div class="item item3">6</div>
</div>

https://codepen.io/TechnoGeek/pen/GdZodo

だから、CSSグリッドがこれに役立つと思いました。だから私は何かを試しましたが、それを取得する方法がわかりませんでした。

html,
body {
  height: 100%;
  margin: 0px;
}

.grid {
  display: grid;
  height: 100%;
  background-color: lightgreen;
  grid-template-columns: repeat(2, 1fr);
  grid-template-row: repeat(2, 1fr);
  grid-gap: 5px;
  /*   grid-auto-flow: column; */
}

.item {
  border: 1px solid;
}

.item:nth-child(odd) {
  background-color: lightblue;
}

.item:nth-child(even) {
  background-color: lightslategray;
}

.item1 {
  grid-column: 1/3;
}
<div class="grid">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item1">4</div>
  <div class="item item2">5</div>
  <div class="item item3">6</div>
</div>

https://codepen.io/TechnoGeek/pen/BxKoaG

グリッドレイアウトでは、アイテムはレイアウト内に収まるように縮小されています。

コンテナ内のアイテムの数は動的です。アイテム数に関係なく、レイアウトは表示されている各グループの構造を維持する必要があります。

誰かがこれを達成する方法を助けることができますか？

前もって感謝します。

htmlcssflexboxcss-grid
3
techno geek

水平スクロールの場合、最も簡単な解決策は、ビューごとに個別のコンテナーを作成することです。次に、コンテナ全体（body）を行方向のフレックスコンテナにします。

body {
  display: flex;
  margin: 0;
}

.flexbox {
  flex: 0 0 100vw;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  background-color: lightgreen;
}

.item {
  flex: 1 0 50%;
  min-height: 50%;
  border: 1px solid;
}

.item1 {
  flex-basis: 100%;
}

.item:nth-child(odd) {
  background-color: lightblue;
}

.item:nth-child(even) {
  background-color: lightslategray;
}

* {
  box-sizing: border-box;
}
<div class="flexbox">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>
<div class="flexbox">
  <div class="item item1">4</div>
  <div class="item item2">5</div>
  <div class="item item3">6</div>
</div>
0
Michael_B