Nested Grids - Funktioniert nicht.

[BloodSteam]

Hallo,
ein Grid der in einem Grid ist funktioniert nicht. Also es funktioniert auf Firefox, mobil und als desktop... aber nicht bei Safari und Chrome.

Bei chrome funktioniert der erste Grid für den body aber nicht der zweite für die Gallerie.

Was kann Ich da machen?

/* HTML */
<div id="gallery">
		<img src="/bilder/1.jpg" alt="">
		<img src="/bilder/2.jpg" alt="">
		<img src="/bilder/3.jpg" alt="">
		<img src="/bilder/4.jpg" alt="">
		<img src="/bilder/5.jpg" alt="">
		<img src="/bilder/6.jpg" alt="">
</div>

#gallery{
	display:grid;
	grid-gap:6px;
	grid-template-columns: repeat(3,1fr);
	grid-template-areas:
		"pic1 pic2 pic3"
		"pic4 pic5 pic6";
}
/* IMG */
#gallery img:nth-child(1){
	grid-area: pic1;
}
#gallery img:nth-child(2){
	grid-area: pic2;
}
#gallery img:nth-child(3){
	grid-area: pic3;
}
#gallery img:nth-child(4){
	grid-area: pic4;
}
#gallery img:nth-child(5){
	grid-area: pic5;
}
#gallery img:nth-child(6){
	grid-area: pic6;
}

Oder kennt ihr ein Plan B ?

 

[BloodSteam]

Ich glaube so langsam dass CSS ein witz ist.

<div id="gallery">
		<a href=""><img src="/bilder/1.jpg" alt=""></a>
		<a href=""><img src="/bilder/2.jpg" alt=""></a>
		<a href=""><img src="/bilder/3.jpg" alt=""></a>
		<a href=""><img src="/bilder/4.jpg" alt=""></a>
		<a href=""><img src="/bilder/5.jpg" alt=""></a>
		<a href=""><img src="/bilder/6.jpg" alt=""></a>
	</div>

Die Anker sind kleiner als die Bilder... Ich könnte mir keine Option vorstellen wo sowas nützlich wäre wo der Anker kleiner ist als das Bild.
Ich versuche eine Gallerie zu machen wo es 2 reihen gibt je 3 Bilder. Es hat mit Grid perfekt funktioniert jedoch sind die Devs zu dumm um mal was für die Welt zu tun und es mal zu unterstützen... hauptsächlich ist damit Chrome und Safari gemeint.

Hier mit nested grid und auf Firefox <3

 

[DataDino]

Definiere bitte "Anker kleiner" und erkläre mal bitte, wie es auf Safari aussieht. Denn nur durch den Code-Ausschnitt kann man das Verhalten nicht 100% genau nachvollziehen. Und Safari hab ich net

 

[BloodSteam]

Definiere bitte "Anker kleiner" und erkläre mal bitte, wie es auf Safari aussieht. Denn nur durch den Code-Ausschnitt kann man das Verhalten nicht 100% genau nachvollziehen. Und Safari hab ich net

Ich hab Safari auch nicht. Egal wie es wo aussieht, auf dem Bild sieht man es wie es aussehen soll. Es ist aber ein grid.

 

[DataDino]

Ich hab Safari auch nicht. Egal wie es wo aussieht, auf dem Bild sieht man es wie es aussehen soll. Es ist aber ein grid.

Dann kann ich das nicht wirklich nachvollziehen. Daher treffe ich die Aussage, das laut Can i use Chrome sowie auch Safari CSS-Grid-Layouts uneingeschränkt unterstützt und das es problemlos funktionieren muss.
Can I use... Support tables for HTML5, CSS3, etc

 

[BloodSteam]

Spoiler

Die rede hier ist von nested grid layout. Nested Grid = Ein Grind in einem Grid. Body = Grid + Gallerie = Grid = die Gallerie ist im Body also nested Grid layout.
Dieses "muss" passt hier nicht, ich kann neben dem Firefox browser chrome öffnen und dir beweisen das hier nichts muss.

Hier ist ein Beweis:


Mich nervt es dass große Firmen wie Google und Apple unfähig sind den Browser richtig zu machen. Firefox kann es wie es aussieht, wenn die Grid können aber kein nested grid? Verstehe Ich nicht.

@Edit
ICH HAB WAS!

#gallery img{
width: calc(50% - 3px);
}

Da entsteht so ein margin zwischen den Bildern, es scheint als wären es 3px weil es immer gleich bleibt und ganzen container immer von Rand zu Rand füllt

calc(33.31% - 3px)

Wären dann 3 Bilder nebeneinender

@Edit v2

Es enstehen white spaces (weiß nicht wieso...)
also alle <img> nebeneinander und:

Lösung

#gallery img{
	width:calc(33.33% - 4px);
	margin:0 2px;
}