web-dev-qa-db-ja.com

CSSグリッドを使用して列の最小数と最大数を設定する

最大5列（大および超大ビューポート用）および最小3列（iPhone 7などの小さなビューポート用）に表示したい10 div（64px x 64px）があります。

私はCSSグリッドでこれをしようとしていますが、最小列部分を行うことができません（3列に収まるスペースがあっても2列になります）。

body {
  background-color: wheat;
}

.parent {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 140px));
  max-width: 800px;
}

.child {
  height: 64px;
  width: 64px;
  background-color: brown;
}
<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>

グリッドコンテナの最大幅は800pxです。

Codepen のリンクはこちら

編集：可能であれば、CSSグリッドのみを使用して、つまりメディアクエリまたはFlexboxを使用せずにこれを達成したいと思います。

htmlcsscss3css-grid
12
Sumit Bagga

_@media_クエリを使用してgrid-template-columns: repeat(5, 1fr);を大型デバイスに使用し、grid-template-columns: repeat(3, 1fr);を使用して、必要な出力を取得できます。小型デバイス用

_body {
  background-color: wheat;
}

.parent {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(5, 1fr);  
}

.child {
  height: 64px;
  width: 64px;
  background-color: brown;
}

@media(max-width:540px){
  .parent {
     grid-template-columns: repeat(3, 1fr);
  }
}_
_<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>_
3
SantoshK

これはあなたが探しているものだと思います。

_body {
  background-color: wheat;
}

.parent {
  display: grid;
  grid-gap: 2vw;
  grid-template-columns: repeat(auto-fill, minmax(100px, 120px));
  max-width: 800px;
}

.child {
  height: 64px;
  width: 64px;
  background-color: brown;
}_
_<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>_

grid-template-columns: repeat(auto-fill, minmax(100px, 140px));をgrid-template-columns: repeat(auto-fill, minmax(100px, 120px));に変更しました

小さな画面サイズでは、子は_140px_領域を予約し、小さな画面で2列に分割されるため、この問題を解決するために_120px_および_grid-gap: 2vw;_に変更しました。

これがお役に立てば幸いです。

1
weBBer

これが役立つことを願っています

https://codepen.io/pandiyancool/pen/oPmgeP

css

body {
  background-color: wheat;
}

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  height: 80px;
  padding: 25px;
  background-color: brown;
  border: 1px solid #ccc;
  flex: 1 1 160px;
  flex-basis: 20%;
}
1
Pandiyan Cool

@weBBerの最大幅の回答はOkですが、min-width（N）pxを設定する必要があります

0
Ali Edp

流動的な列を気にするかどうかはわかりませんが、メディアクエリを使用すると次のことができます。

.parent { grid-template-columns: repeat(3, 1fr); }は小さな画面用

そして

.parent { grid-template-columns: repeat(5, 1fr); }は大画面用

0
Frish