wake-up-neo.com

Festlegen der minimalen und maximalen Spaltenanzahl mithilfe von CSS-Grid

Ich habe 10 Divs (64px x 64px), die ich in maximal 5 Spalten (für große und große Ansichtsfenster) und mindestens 3 Spalten (für kleine Ansichtsfenster wie iPhone 7 usw.) anzeigen möchte.

Ich versuche, dies mit CSS-Grid zu tun, kann aber nicht den minimalen Spaltenteil ausführen (es geht um 2 Spalten, auch wenn 3 Spalten vorhanden sind).

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>

Die maximale Breite für den Gittercontainer beträgt 800 Pixel.

Hier ist der Link zu Codepen

Bearbeiten: Wenn möglich, möchte ich dies nur mit CSS-Grid durchführen, d. H. Ohne Media Queries oder Flexbox.

htmlcsscss3css-grid
9
Sumit Bagga

sie können die erforderliche Ausgabe abrufen, indem Sie @media verwendete Abfrage grid-template-columns: repeat(5, 1fr); für großes Gerät und grid-template-columns: repeat(3, 1fr) verwenden. für kleines Gerät 

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>

1
SantoshK

Ich hoffe das hilft

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

Ich denke, das ist es, was du suchst.

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>

Ich habe - grid-template-columns: repeat(auto-fill, minmax(100px, 140px)); in grid-template-columns: repeat(auto-fill, minmax(100px, 120px)); geändert.

Da in der kleinen Bildschirmgröße der untergeordnete Bereich 140px reserviert wird, ist der untergeordnete Bereich in zwei Spalten unterteilt. Jetzt habe ich ihn in 120px und grid-gap: 2vw; geändert, um dieses Problem zu beheben.

Ich hoffe das war hilfreich für dich.

0
weBBer

Für die maximale Breite ist die Antwort von @weBBer Ok), aber Sie sollten die minimale Breite (N) px einstellen

0
Ali Edp

Sie sind sich nicht sicher, ob Sie auf flüssige Säulen achten, aber Sie könnten Medienabfragen verwenden, um Folgendes zu tun:

.parent { grid-template-columns: repeat(3, 1fr); } Für kleine Bildschirme

und

.parent { grid-template-columns: repeat(5, 1fr); } Für größere Bildschirme

0
Frish