Beispielcode für CSS-Layout an beiden Enden (unter Verwendung des negativen Rands des übergeordneten Elements)

<Stil>
        * {
            Polsterung: 0px;
            Rand: 0px;
            Box-Größe: Rahmenbox;
        }
        
        .max-box {
            maximale Breite: 1200px;
            Rand: 0px automatisch;
        }
        
        .Kasten {
            Überlauf: versteckt;
            Breite: berechnet (100 % + 20 Pixel);
            Rand links: -10px;
        }
        
        .inner {
            Höhe: 100px;
            Rand: durchgehend 1 Pixel rot;
            schweben: links;
            Rand links: 10px;
            Breite: berechnet (((100 % – 20 Pixel) – 10 Pixel * 3)/4);
        }
        
        .max-box2 {
            maximale Breite: 1200px;
            Rand: 50px automatisch;
            Rand: durchgehend 1 Pixel rot;
            Höhe: 200px;
        }
    </Stil>

 <div Klasse="max-box2">

    </div>
    <div Klasse="max-box">
        <div Klasse="Box">
            <div Klasse="inner">

            </div>
            <div Klasse="inner">

            </div>
            <div Klasse="inner">

            </div>
            <div Klasse="inner">

            </div>
        </div>
    </div>

x = 10px; d. h. der gewünschte Abstand y = 4, d. h. die gewünschte Anzahl von Zeilen Übergeordnetes Element: Breite: calc(100 % + (x * 2));
Kind: Breite: calc(((100% - (x * 2)) - x * ( y - 1)) / y );