Zeilenhöhe seltsames Verhalten mit Ausrichtungswesen [geschlossen] ⇐ CSS

[Anonymous]

Hier ist der HTML- und CSS-Mindestcode, den ich verwende: < /p>

Code: Select all

* {
margin: 0;
padding: 0;
}

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 20px auto;
align-items: stretch;
}

.sub-grid {
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
font-size: 1.2rem;
display: grid;
grid-template-columns: min-content 1fr;
gap: 15px 10px;
}

.sub-grid>.icon {
grid-row: 1 / span 2;
width: 45px;
height: 45px;
}< /code>


Heading 1
Lorem,
ipsum dolor sit amet consectetur adipisicing elit. Tenetur distinctio necessitatibus pariatur voluptatibus.


Heading 2
Voluptatum mollitia quae. Vero ipsum sapiente molestias accusamus rerum sed a eligendi aut quia.


Heading 3
Tenetur distinctio necessitatibus pariatur voluptatibus quidem consequatur harum.


Heading 4
Vero ipsum sapiente molestias accusamus rerum. Lorem,
ipsum dolor sit amet consectetur adipisicing elit.


Heading 5
Quidem consequatur harum,
voluptatum mollitia quae. Tenetur distinctio necessitatibus pariatur voluptatibus.


Heading 6
Pariatur voluptatibus quidem consequatur harum,
voluptatum mollitia quae

Https://jsfiddle.net/rutheless_vayu/2ut5vrs3/9/

Ich merke, dass der Platz unterhalb des H2-Elements unterscheidet, wenn sie eine unterschiedliche Anzahl von Textleitungen haben, wie für z.: Das erste Subgrid hat 4 Zeilen, und das zweite Untergord hat 3 Zeilen. Infolgedessen befindet sich die zweite Zeile des ersten Subgrids leicht über der zweiten Zeile des zweiten Subgrids ... Kann jemand erklären, warum dies geschieht, und ich bemerkte, dass die Verwendung von Ausstellungs-Items: Start auf Grid-Klasse < /strong> dieses Problem löst und die Subgrid-Zeilen in Einklang miteinander