Wie mache ich, dass das erste Rasterelement 100 % umfasst?

Question 1

Ich habe Folgendes für den Desktop, wodurch 4 gleiche Spalten mit jeweils 25 % erstellt werden.

.footer-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

Wie kann ich diese jedoch in einer Medienabfrage skalieren, damit die erste Spalte 100 % beträgt und der Rest der Spalten natürlich darunter verläuft und jetzt noch 33,333 % CSS-Raster verwenden?

.footer-inner {
  display: grid;
  grid-template-columns: 100% 1fr 1fr 1fr; 
  /* AND THIS */
  grid-template-columns: 100% 33.333% 33.333% 33.333%;
}

Question 2

Ändern Sie das Raster in drei Spalten und stellen Sie das erste div so ein, dass es alle an der entsprechenden Stelle umfasst.

.footer-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.footer-inner div {
  border: 1px solid grey;
  text-align: center;
}

.footer-inner :first-child {
  grid-column: 1 / -1;
}

<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

Question 3

Du kannst es mit dem machen grid-column: span 3 auf die setzen :first-child:

.footer-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 650px) {
  .footer-inner {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-inner > div:first-child {
    grid-column: span 3;
    border: 1px solid;
  }
}

<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

Question 4

Hier ist eine sehr einfache Methode. Sie benötigen nur drei Zeilen Code.

Für Breitbildschirme:

.footer-inner {
  display: grid;
  grid-auto-columns: 1fr;
}

.footer-inner > div {
  grid-row: 1;
}



/* non-essential demo styles */
.footer-inner { background-color: gray; grid-gap: 1px; }
.footer-inner > div { background-color: lightgreen; text-align: center; padding: 5px;}

<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

Für schmale Bildschirme:

.footer-inner {
  display: grid;
  grid-auto-columns: 1fr;
}

.footer-inner > div:first-child {
  grid-column: span 3;
}



/* non-essential demo styles */
.footer-inner { background-color: gray; grid-gap: 1px; }
.footer-inner > div { background-color: lightgreen; text-align: center; padding: 5px;}

<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

Erläuterungen

breite Bildschirme

Der grid-auto-columns -Eigenschaft legt die Breite impliziter Spalten fest. Indem Sie den Wert auf setzen 1fr, verbrauchen alle erstellten Spalten eine gleichmäßige Verteilung des freien Speicherplatzes in der Zeile. Mit grid-row: 1 auf alle Artikel angewendet, erscheinen sie in der ersten Zeile.

schmale Bildschirme

Nachdem Sie das erste Element so eingestellt haben, dass es drei implizite Spalten umfasst, muss der Container drei Spalten erstellen. Die restlichen Elemente können dann sauber darunter in die neu erstellten Spalten passen.

Schließlich erwägen Sie die Verwendung fr Einheiten anstelle von Prozentsätzen (wie 33,33 %) in Ihrer Spurgröße. Dann brauchen Sie sich um die Berücksichtigung von Rändern und Rasterlücken nicht zu kümmern. Hier sind weitere Informationen: Der Unterschied zwischen Prozent- und fr-Einheiten im CSS-Grid-Layout