Positioning Elements in CSS Grid: Architecture of Pyramid Chambers

Welcome back, @name! Now that you know the basics of CSS Grid, it's time to learn how to precisely position elements within the grid. Imagine you are an architect of a pyramid and must carefully plan where each chamber, corridor, and throne room will be located. In CSS Grid, you have powerful positioning tools at your disposal!

Grid Lines

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).

1.container {
2  display: grid;
3  grid-template-columns: 1fr 1fr 1fr;
4  grid-template-rows: 100px 100px 100px;
5  gap: 10px;
6}

In the example above, we have column lines 1-4 and row lines 1-4.

grid-column and grid-row

To place an element at a specific position in the grid, we use the

grid-column

and

grid-row

properties. We can specify the start and end lines:

1.throne-room {
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}
5
6.corridor {
7  grid-column: 3 / 4;  /* Only the third column */
8  grid-row: 1 / 4;     /* Stretches across 3 rows */
9}

It's like designing a pyramid blueprint — the throne room spans the full width, while a narrow corridor runs through all the floors!

The span Keyword

Instead of specifying line numbers, you can use the

span

keyword to define how many cells an element should occupy:

1.grand-hall {
2  grid-column: span 2;  /* Stretch across 2 columns */
3  grid-row: span 3;     /* Stretch across 3 rows */
4}
5
6.small-chamber {
7  grid-column: 2 / span 1;  /* Start from line 2, occupy 1 column */
8}

grid-area — Shorthand Notation

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-chamber {
2  grid-area: 1 / 1 / 3 / 3;
3  /* Row 1-3, column 1-3 = a 2x2 square */
4}
5
6.guard-post {
7  grid-area: 3 / 1 / 4 / 4;
8  /* Last row, full width */
9}

Practical Example: Temple Floor Plan

1<div class="temple">
2  <div class="entrance">Entrance</div>
3  <div class="main-hall">Main Hall</div>
4  <div class="side-chapel">Side Chapel</div>
5  <div class="inner-sanctuary">Inner Sanctuary</div>
6  <div class="treasury">Treasury</div>
7</div>

1.temple {
2  display: grid;
3  grid-template-columns: repeat(4, 1fr);
4  grid-template-rows: repeat(3, 120px);
5  gap: 8px;
6}
7
8.entrance {
9  grid-column: 2 / 4;  /* Middle columns */
10  grid-row: 1;
11}
12
13.main-hall {
14  grid-column: 1 / 5;  /* Full width */
15  grid-row: 2;
16}
17
18.side-chapel {
19  grid-column: 1 / 2;
20  grid-row: 3;
21}
22
23.inner-sanctuary {
24  grid-column: 2 / 4;
25  grid-row: 3;
26}
27
28.treasury {
29  grid-column: 4 / 5;
30  grid-row: 3;
31}

With these techniques, you can precisely arrange elements within the grid, just like an architect planning every chamber in an Egyptian temple!