So stellen Sie Rasterspalten gleich mit einem anderen Rasterlayout ein

Ich habe zwei Arten von Layouts mit Anzeigeraster.
Siehe Screenshot

Aber ich habe mich gefragt, warum die ersten Spalten nicht gleich breit sind?

Die Breite der ersten Spalte von Layout 1 beträgt: 239,40 Pixel

Die Breite der ersten Spalte von Layout 2 beträgt: 240,70 Pixel

Wie kann man es mit fr gleich einstellen?

Hier ist mein Code

.grid-container {
 display: grid;
 grid-gap: 25px;
}
/* News Module 1 */
.grid-container--news1 {
 grid-template-columns: 2fr 1fr 1fr 1fr;
}
.grid-container--news1.grid-item:nth-of-type(1) {
 grid-row: 1 / 4;
}
.grid-container--news1.grid-item:nth-of-type(2) {
 grid-column: 2 / 4;
}
/* News Module 2 */
.grid-container--news2 {
 grid-template-columns: 1.3fr 1fr 1fr;
}
.grid-container--news2.grid-item:nth-of-type(1) {
 grid-row: 1 / 3;
}
.grid-container--news2.grid-item:nth-of-type(2) {
 grid-column: 2 / 4;
}
.grid-item {
 background: steelblue;
 color: white;
 font-size: 20px;
 padding: 20px;
 border: skyblue 1px solid;
}

<div class="row gx-3 gx-md-4">
 <div class="col-12 mb-3">
 <h3>News Module 1</h3>
 <div class="grid-container grid-container--news1">
 <?php for ($i=1; $i < 7; $i++):?>
 <div class="grid-item"><?php echo $i;?></div>
 <?php endfor;?>
 </div>
 </div>
 <div class="col-12">
 <h3>News Module 2</h3>
 <div class="grid-container grid-container--news2">
 <?php for ($i=1; $i < 5; $i++):?>
 <div class="grid-item"><?php echo $i;?></div>
 <?php endfor;?>
 </div>
 </div>
 </div>
 </div>```

Lösung des Problems

Ich glaube nicht, dass Sie es schaffen werden, es mit fr gleich einzustellen.

Es treten Rundungsfehler auf, und da Ihre Lückengrößen unabhängig vom Wert von 1vw in absoluten px-Einheiten angegeben werden, werden die beiden Layouts nicht mit der gleichen Menge an freiem Speicherplatz belassen.

Sie könnten jedoch die erste Spalte auf einen Prozentsatz setzen und sie sollten dann auf beiden Layouts gleich erscheinen.

Alternativ können Sie eine Berechnung durchführen, um die gewünschte Breite in Bezug auf die Breite des Behälters abzüglich der Lücken zu bestimmen.

Wenn wir uns das erste Raster ansehen, haben wir:

2fr + 3 * 25px + 3fr = 100%

Die Breite der ersten Spalte kann also per CSS berechnet werden

 calc((100% - 75px) * 2 / 5)

Sie können dies für die Breite der ersten Spalte für beide Layouts festlegen und dann die restlichen fr-Einstellungen, wie Sie sie jetzt haben.