Example 1: using percentages!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, molestiae.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, molestiae.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, molestiae.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, molestiae.

Example 2: using fr!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, molestiae.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, molestiae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, molestiae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, molestiae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, molestiae. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, molestiae.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, molestiae.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, molestiae.

Example 3: nested grids

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, molestiae.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, molestiae.
Nested grid-1

grid-auto-rows: 100px;
Nested grid-2

grid-auto-rows: 100px;
Nested grid-3

grid-auto-rows: 100px;

Example 4: using !

justify-self: left;
justify-self: right;
align-self: start;
align-self: end;

Example 5: using CSS grid LINES!

css-grid-lines
1
2
3
4
5

Example 6: using grid-colums (eg. 1/-1, 1/3)

Header
Menu
Content
Footer