Advanced Positioning in CSS Grid

@name, imagine you are a pyramid architect and need to precisely determine where each chamber, corridor, and treasury will be. In CSS Grid, you have advanced positioning techniques at your disposal that allow you to control every grid element with surgical precision!

grid-column and grid-row with Line Numbers

Every grid has numbered lines — both vertical (column lines) and horizontal (row lines). Numbering starts from 1. If you have 3 columns, you have 4 column lines (1, 2, 3, 4). You can specify the exact position of an element by providing the start and end lines:

1.pharaoh-chamber {
2  grid-column: 1 / 3;  /* From line 1 to line 3 = spans 2 columns */
3  grid-row: 1 / 2;     /* From line 1 to line 2 = spans 1 row */
4}

You can also use negative line numbers, counted from the end of the grid:

1.footer {
2  grid-column: 1 / -1;  /* From the first to the last line = full width */
3}

It's like drawing precise coordinates on a pyramid blueprint — each stone block has an exactly designated position.

Stretching Elements — The span Keyword

Instead of providing end line numbers, you can use the

span

keyword to specify how many cells an element should occupy:

1.grand-hall {
2  grid-column: span 2;  /* Stretch across 2 columns from the current position */
3  grid-row: span 3;     /* Stretch across 3 rows */
4}
5
6.treasure-room {
7  grid-column: 2 / span 2;  /* Start from line 2, occupy 2 columns */
8  grid-row: 1 / span 1;
9}

The difference between

span

and line numbers is that

span

is relative — it says "occupy N cells," while line numbers are absolute — they say "from line X to line Y."

Named Grid Lines

You can give names to lines, which makes the code more readable. Names are placed in square brackets:

1.temple {
2  display: grid;
3  grid-template-columns:
4    [sidebar-start] 200px
5    [sidebar-end main-start] 1fr
6    [main-end aside-start] 250px
7    [aside-end];
8  grid-template-rows:
9    [header-start] 80px
10    [header-end content-start] 1fr
11    [content-end footer-start] 60px
12    [footer-end];
13}

Now you can position elements using names instead of numbers:

1.sidebar {
2  grid-column: sidebar-start / sidebar-end;
3  grid-row: content-start / content-end;
4}
5
6.main-content {
7  grid-column: main-start / main-end;
8  grid-row: content-start / content-end;
9}
10
11.header {
12  grid-column: sidebar-start / aside-end;  /* Full width */
13  grid-row: header-start / header-end;
14}

Named lines are like labels on an architectural blueprint — instead of "line 3," you have "start of main hall." It's much easier to navigate!

grid-area as a Positioning Shorthand

The

grid-area

property lets you define an element's position in a single line. Format:

grid-area: row-start / column-start / row-end / column-end

:

1.pharaoh-throne {
2  grid-area: 1 / 1 / 3 / 3;
3  /* Row from 1 to 3, column from 1 to 3 = a 2x2 square */
4}
5
6.guard-post {
7  grid-area: 3 / 1 / 4 / -1;
8  /* Last row, full width */
9}

Practical Example: Egyptian Temple Floor Plan

Let's combine all the techniques to create a complex temple floor plan:

1.temple-complex {
2  display: grid;
3  grid-template-columns:
4    [entrance-start] 150px
5    [entrance-end hall-start] 1fr
6    [hall-end chapel-start] 200px
7    [chapel-end];
8  grid-template-rows:
9    [top] 100px
10    [middle] 1fr
11    [bottom] 80px
12    [end];
13  gap: 10px;
14  min-height: 400px;
15}
16
17.entrance {
18  grid-column: entrance-start / chapel-end;  /* Full width */
19  grid-row: top / middle;
20}
21
22.main-hall {
23  grid-area: middle / hall-start / bottom / hall-end;
24}
25
26.side-chapel {
27  grid-column: chapel-start / chapel-end;
28  grid-row: middle / end;  /* Two rows */
29}
30
31.storage {
32  grid-column: entrance-start / entrance-end;
33  grid-row: middle / bottom;
34}
35
36.foundation {
37  grid-column: 1 / -1;  /* Full width using numbers */
38  grid-row: bottom / end;
39}

With these advanced positioning techniques, you can precisely arrange elements within the grid. Line numbers give you full control,

span

simplifies stretching, named lines make the code readable, and

grid-area

allows for concise notation. Every Egyptian architect would have dreamed of such tools!