Bei den bisherigen Beispielen haben wir nur das Element verwendet, das das Raster definiert – hier wird ein Element (<li class="abgesetzt">) angesprochen, um gezielt positioniert zu werden:

HTML

<nav>
    <ul>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">News</a></li>
        <li class="current"><a href="#">Über uns</a></li>
        <li><a href="#">Kontakt</a></li>

        <li class="abgesetzt"><a href="#">Impressum</a></li>
    </ul>
</nav>

CSS

/* Rest wie beim vorherigen Beispiel */
nav ul {
    /* … */
    display: grid;
    /* Kurzschreibweise für: grid-template-columns: 1fr 1fr 1fr 1fr 1f 1fr; */
    grid-template-columns: repeat(6, 1fr);
}

.abgesetzt {
    /* das Element fängt somit nicht an Raster-Platz 5 sondern 6 an */
    grid-column: 6;
}

Demo

Demo – schaut Euch den Source-Code an!

Download

Ihr könnt Euch das Beispiel auch herunterladen und damit in Brackets experimentieren…