grid-template-columns funktioniert nicht

Habe ich einen block display: grid.

Gemäß der Idee, das erste element sollte gedehnt werden, um 2 Spalten und 2 Zeilen, die anderen besetzen einer Zelle jede.

Aber die grid-template-columns - Eigenschaft funktioniert bei mir nicht, welchen Wert ich da setzen, wird der Inhalt nicht verschoben wird.

Nun das erste element kam in die erste Zelle nur, got out of bounds, aber nicht die Ausdehnung auf zwei Spalten und zwei Zeilen.

Wo ist mein Problem?

Was ich brauche:

grid-template-columns funktioniert nicht

CSS:

.exclusive-content {
  display: grid;
  grid: 270px 270px / repeat(4, 270px);
  justify-content: center;
  grid-gap: 30px;
  margin-top: 120px;
}

.exclusive-content img {
  background-size: cover;
  background-position: center;
}

.exclusive-content a:first-child {
  width: 540px;
  height: 540px;
  grid-template-columns: 1 / 3;
  grid-template-rows: 1 / 3
}

.exclusive-content a:nth-child(2) {
  grid-template-columns: 3;
}

HTML:

<div class="exclusive-content">
  <a href="#"><img src="http://anti-naruto.ru/img/product-1-lg.jpg" alt="1"></a>
  <a href="#"><img src="http://anti-naruto.ru/img/product-2-sm.jpg" alt="2"></a>
  <a href="#"><img src="http://anti-naruto.ru/img/product-3-sm.jpg" alt="3"></a>
  <a href="#"><img src="http://anti-naruto.ru/img/product-4-sm.jpg" alt="4"></a>
  <a href="#"><img src="http://anti-naruto.ru/img/product-5-sm.jpg" alt="5"></a>
</div>

InformationsquelleAutor Maxim Yazykov | 2018-01-17
  1. 3

    Haben Sie verwendet grid-template-columns und grid-template-rows Eigenschaften auf das Kind an das Gitter. Diese Eigenschaften werden mit display: grid auf dem Behälter.

    Für die direkt untergeordneten Elemente des Rasters, verwenden Sie raster-Spalte und raster-Zeile.

    CSS:

    .exclusive-content {
  display: grid;
  grid: 270px 270px / repeat(4, 270px);
  justify-content: center;
  grid-gap: 30px;
  margin-top: 120px;
}

.exclusive-content img {
  background-size: cover;
  background-position: center;
}

.exclusive-content a:first-child {
  width: 540px;
  height: 540px;
  grid-column: 1 / 3;
  grid-row: 1 / 3
}

.exclusive-content a:nth-child(2) {
  grid-template-columns: 3;
}

    HTML:

    <div class="exclusive-content">
  <a href="#"><img src="http://anti-naruto.ru/img/product-1-lg.jpg" alt="1"></a>
  <a href="#"><img src="http://anti-naruto.ru/img/product-2-sm.jpg" alt="2"></a>
  <a href="#"><img src="http://anti-naruto.ru/img/product-3-sm.jpg" alt="3"></a>
  <a href="#"><img src="http://anti-naruto.ru/img/product-4-sm.jpg" alt="4"></a>
  <a href="#"><img src="http://anti-naruto.ru/img/product-5-sm.jpg" alt="5"></a>
</div>

    InformationsquelleAutor sol
  2. 1

    Das problem ist, dass Sie die Anwendung der grid-template-columns Eigenschaft grid-Elemente. Dies ist ein grid-container-Eigenschaft. Es wird ignoriert werden, die auf grid-Elemente (es sei denn, Sie sind auch grid-Container).

    Stattdessen die grid-column und grid-row Eigenschaften, die für die grid-Elemente.

    CSS:

    .exclusive-content {
  display: grid;
  grid: 270px 270px / repeat(4, 270px);
  justify-content: center;
  grid-gap: 30px;
  margin-top: 120px;
}

.exclusive-content img {
  /* background-size: cover; (applies only to background images; not what you have) */
  /* background-position: center; (same as above; does nothing here) */
  width: 100%; /* new */
}

.exclusive-content a:first-child {
  /* width: 540px; (not necessary; size controlled at grid container level)  */
  /* height: 540px; (same as above) */
  grid-column: 1 / 3; /* adjustment */
  grid-row: 1 / 3;    /* adjustment */
}

.exclusive-content a:nth-child(2) {
  grid-column: 3;     /* adjustment */
}

    HTML:

    <div class="exclusive-content">
  <a href="#"><img src="http://anti-naruto.ru/img/product-1-lg.jpg" alt="1"></a>
  <a href="#"><img src="http://anti-naruto.ru/img/product-2-sm.jpg" alt="2"></a>
  <a href="#"><img src="http://anti-naruto.ru/img/product-3-sm.jpg" alt="3"></a>
  <a href="#"><img src="http://anti-naruto.ru/img/product-4-sm.jpg" alt="4"></a>
  <a href="#"><img src="http://anti-naruto.ru/img/product-5-sm.jpg" alt="5"></a>
</div>

    InformationsquelleAutor Michael_B
  3. 1

    ...siehe hier MDN-CSS-grid-template-columns

    den container, in dem Sie bei der Definition der Zeilen und Spalten werden wie folgt geschrieben
    grid-template- : 30% 70% (variety of different ways you can define)
    dann auf die eigentliche Zelle, die Sie definieren, welche Zeile und Spalte er sitzt in grid-row: 1/3 und grid-column: 2/3

    Siehe meine JSBIN Beispiel. (Wenn Sie Ihre erste Bild war breiter, es passen würde, die gesamte Zeile...)

    • ich bin so traurig. Ich vergaß hinzuzufügen, Referenz-Bild. Das ist i.stack.imgur.com/j5EW2.png Wie perfekt das schreiben meiner CSS?
    • Was ich meinte ist, dass er die Anwendung grid-template-___ auf Klassen, die am wahrscheinlichsten waren, bedeutete zu werden die Zellen innerhalb des container-raster statt der Festlegung Vorlage row/col auf der container selbst habe ich bearbeitet meine Antwort.
    InformationsquelleAutor Akin Hwan
Schreibe einen Kommentar