logo

Grid Layout mit benannten Linien - 3

Rasterlinien mit mehreren Namen

Manche der Benannten Linien haben jetzt doppelte Namen:

	grid-template-columns:
    [left] 1fr
    [nav-start] 1fr
    [nav-end content-start] 3fr
    [content-end margin-start] 1fr
    [margin-end right];
	grid-template-rows: 
    min-content 
    [nav-start main-top] 1fr 
    [aside-start] 1fr
    [footer-start main-bottom] min-content;			
};

Der Inhalt wurde so positioniert:

#content {
	grid-column: content-start / content-end;
	grid-row: main-top / main-bottom;
}

So können die Rasterfelder noch genauer angesprochen werden.